html – 如何在文本中心对齐不均匀的图标？

概述我试图在这个图像中居中对齐文本,理想情况下使用尽可能少的CSS / HTML.如您所见,左侧的图标将其推离中心： 以下是此顶部的相关HTML和CSS： <div class="navbarheader"> <div class="header-left"> <button type="button" class="pull-left btn-nav-menu"> 我试图在这个图像中居中对齐文本,理想情况下使用尽可能少的CSS / HTML.如您所见,左侧的图标将其推离中心：

以下是此顶部的相关HTML和CSS：

<div >    <div >        <button type="button" >            <i ></i>        </button>        <button type="button"  ng-click="ui.showSearch()">            <i ></i>        </button>    </div>    <div >        <div >{{ui.headerTitle}}</div>    </div>    <div >        <button  ng-click="ui.toggleWatchLists()">            <i ></i>        </button>    </div></div>

CSS：

.navbarheader {  display: flex;  flex-direction: row;  justify-content: space-around;}.navbarheader .header-left {  margin-left: -0.5rem;}.navbarheader .header-Title {  flex-grow: 2;  text-align: center;}.navbarheader .header-right {  margin-right: -0.5rem;}

任何想法如何保持文本中心对齐,但如果有必要允许它占据所有空白？

值得一提的是bootstrap 4.0 Alpha代码库.

解决方法 你需要确保.header-right和.header-left对.header-Title施加相同的“flex”压力.它们的柔韧生长,弯曲收缩和柔性基础需要相等.默认情况下,它们有flex：0 1 auto;所以你不必担心flex-grow [0]和flex-shrink [1].

但是,您需要将auto更改为实用值(浏览器在px中可翻译的任何内容：％,px,em,rem,…),大于50％(如果设置flex-,则可以低于50％增长：1;在.header-left和.header-right上 – 只记得让它们相等).

你的标题即使会产生0的d性基础,也会从左右宽度上同等地增加.当然,你需要确保它始终保持在1行,方法是添加white-space：nowrap到它(如果它真的很长并且你认为它应该包裹在一些非常狭窄的屏幕上,将空格规则放在@media查询中另外,记得在允许它包装时给你的.header-Title足够的flex-basis,所以它不会包含太多的行 – 如果你的总flex-basis大于100％,请不要担心,所有如果父级的flex-wrap设置为nowrap,浏览器将按比例缩小所有元素.

如果您更喜欢CSS到英语,请输入以下代码：

.navbarheader {  display: flex;  align-items: center;  white-space: nowrap;  flex-wrap: nowrap;}.header-right,.header-left {  flex-basis: 50%;}.header-right {  text-align: right;}

和前缀(生产就绪)版本：

.navbarheader {  display: -webkit-Box;  display: -webkit-flex;  display: -ms-flexBox;  display: flex;  -webkit-Box-align: center;  -webkit-align-items: center;      -ms-flex-align: center;          align-items: center;  white-space: nowrap;}.header-right,.header-left {  -webkit-flex-basis: 50%;      -ms-flex-preferred-size: 50%;          flex-basis: 50%;}.header-right {  text-align: right;}

但相关部分是

.header-right,.header-left { flex-basis: 50%; }

总结

以上是内存溢出为你收集整理的html – 如何在文本中心对齐不均匀的图标？全部内容，希望文章能够帮你解决html – 如何在文本中心对齐不均匀的图标？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。