Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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
229,005 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.