Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Centering Flex Item Content

I have the following flex-item (#globalSearchContLi) inside a flex-container. The container is an unordered list. My problem is that I'm creating a fun looking search bar with a half-sphere submit button. The button is pretty much attached to the search bar with inline-block and margin properties. This bundle (the search bar and button ) won't center in the div any way I try to. I tried setting #globalSearchCont with a specific width and auto side margins, but the whole flexbox presentation won't display correctly on mobile.

HTML

<li id="globalSearchContLi">
                <div id="globalSearchCont">
                <input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
                <div id="globalSearchBtn" class="backImageCon"></div>
                </div>
            </li>

CSS

#globalSearchContLi{
        flex-grow: 7;
        margin: 0px 15px;
        flex-basis: 100px;
}



#globalSearchContLi{
        flex-grow: 7;
        margin: 0px 15px;
        flex-basis: 100px;
}

#munchGlobalSearchbar{
        width: 240px;
        height: 50px;
        /* box-shadow: 0 0 0 1px#000,0 0 0 3px #FFF, 0 0 0 5px #333; */
        font-weight: 300;
        font-size: 1.6rem;
        border-radius: 10px;
        display: inline-block;
        margin-top: 20px;
        text-align: center;
        background-color: #edad0c;
        border-bottom: 2px solid #333;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
}

#munchGlobalSearchbar::placeholder{
        color: #000;
}


#globalSearchBtn{
        background-image: url(../imgs/addOn/panEmoji.png);
        width: 50px;
        height: 51px;
        margin: 0px 0px -17px -12px!important;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 50%;
        display: inline-block;
        border: 2px solid #333;
        background-color: #38b32b;
        transition: .2s all ease;
}


.backImageCon{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

Any suggestions/advices? Thanks in advance

1 Answer

Steven Parker
Steven Parker
216,033 Points

First off, none of this is related to flexbox since nothing inside the list item is a flex item (only the list item itself is). One solution would involve using flex inside the list item, but that's another story.

But to just center the "bundle" inside the div you can use the "text-align" property of the div itself:

#globalSearchCont { text-align: center; }

That gets it centered, but that div doesn't really do anything useful. You can get the same result if you eliminate the div entirely and use the same "text-align" setting on the list item.

And FYI .. that second "#globalSearchContLi" CSS rule at the top is redundant — it duplicates the first one.