将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内容居中的主要内容,如果未能解决你的问题,请参考以下文章
是否可以使用 AndroidX 导航将片段中的操作栏标题居中?