将Flex-Item内容居中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将Flex-Item内容居中相关的知识,希望对你有一定的参考价值。

我在一个伸缩容器内有以下伸缩项目(#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;
}

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

答案

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

现在看起来像什么,您希望它看起来像什么?

以上是关于将Flex-Item内容居中的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

CSS代码片段

片段中的布局不居中

是否可以使用 AndroidX 导航将片段中的操作栏标题居中?

堆叠的 flexbox 垂直居中在 chrome 中不起作用

css常用代码片段 (更新中)