将Flex-Item内容居中

Question

我在一个伸缩容器内有以下伸缩项目（#globalSearchContLi）。容器是无序列表。我的问题是，我正在用半球形的提交按钮创建一个看起来很有趣的搜索栏。该按钮几乎与带有内嵌块和边距属性的搜索栏相连。我尝试以任何方式将这个组合（搜寻列和按钮）放在div的中央。我尝试使用特定的宽度和自动边距设置#globalSearchCont，但是整个flexbox演示文稿无法在移动设备上正确显示。

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;
}

有任何建议/建议吗？在此先感谢

Answer 1

您确实需要发布一些图像，无法理解您使用提供的内容想要达到的目的。

现在看起来像什么，您希望它看起来像什么？