Centering Flex Item Content

Question

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

Answer 1 · 2019-10-12T13:11:22Z

October 12, 2019 1:11pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Alejandro Carvajal

Alejandro Carvajal

Centering Flex Item Content

1 Answer

Steven Parker

Steven Parker