如何将带有不均匀图标的文本居中对齐？

Posted 2023-03-05

【中文标题】如何将带有不均匀图标的文本居中对齐？

【英文标题】：How can I center-align text with uneven icons either side?

【发布时间】：2016-04-24 06:11:30

【问题描述】：

我正在尝试使该图像中的文本居中对齐，最好使用尽可能少的 CSS/html。如您所见，左侧的图标将其推离中心：

这是此顶部的相关 HTML 和 CSS：

<div class="navbarheader">
    <div class="header-left">
        <button type="button" class="pull-left btn-nav-menu">
            <i class="navbar-text fa fa-fw fa-navicon"></i>
        </button>
        <button type="button" class="pull-left" ng-click="ui.showSearch()">
            <i class="navbar-text fa fa-fw fa-search"></i>
        </button>
    </div>
    <div class="header-title">
        <div class="navbar-brand">ui.headerTitle</div>
    </div>
    <div class="header-right">
        <button class="btn-watchlist pull-right" ng-click="ui.toggleWatchlists()">
            <i class="navbar-text fa fa-fw fa-binoculars"></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 代码库中。

【问题讨论】：

有点hacky，但你不能把同样的图标放在右边，这样可以平衡，但不会被看到？

不确定要居中的文本是什么？

有什么方法可以发布足够的代码来重现问题或工作演示？

将左右图标容器设为flex-basis、flex-grow 和flex-shrink，将white-space:nowrap 添加到标题中即可。

感谢 cmets 伙计们 - 下面有很多很好的答案目前有效，因此不再对问题进行更新。

【参考方案1】：

您需要确保.header-right 和.header-left 对.header-title 施加相同的“弹性”压力。他们的flex-grow、flex-shrink 和flex-basis 需要相等。默认情况下，它们具有flex:0 1 auto;，因此您无需担心flex-grow[0] 和flex-shrink[1]。

但是，您需要将auto 更改为实际值（浏览器可在px 中翻译的任何内容：%、px、em、rem、...），更大比50% （如果您在.header-left 和.header-right 上设置flex-grow:1;，则可以低于50% - 请记住使它们相等）。

您的标题，即使会产生 flex-basis 或 0，也会从左右宽度相等地增长。当然，您需要通过添加white-space:nowrap 来确保它始终保持在第一行（如果它真的很长并且您认为它应该在一些非常窄的屏幕上换行，请将white-space 规则放在@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%; 

【讨论】：

很好解释。多种解决方案。 +1

@GustvandeWal 理论太多，实践太少。我最终选择了一个可行的解决方案，因为猜测它会帮助一些不熟悉 Bootrasp 4 可选 flex 版本的人。我希望你不介意:)。

这正是我想要的解决方案——使用 flex 模型并且没有 hack。谢谢

【参考方案2】：

您必须在header-title 上使用position: absolute 并将其从元素的自然流中移除，这样它就始终居中 相对于navbarheader

nav 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border: 1px solid black;
  position: relative;


.title 
  position: absolute;
  left: 50%;
  transform: translateY(-50%);


a 
  font-size: 30px;
  padding: 0 10px;

<nav>
  <div class="left">
    <a href="">Icon</a>
    <a href="">Icon</a>
  </div>
  
  <div class="title">Title</div>
  
  <div class="right">Icon</div>
</nav>

【讨论】：

你不是说translate(-50%)吗？

【参考方案3】：

您可以添加与缺少图标大小相同的间隙：

.navbarheader > :last-child
  margin-left:2.5rem;

demo

/* background gradient added to visualize centers */

.navbarheader 
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  max-width: 600px;
  padding: 1em 0;
  margin: auto;
  background: linear-gradient(to left, gray 50%, lightgray 50%);

.navbarheader .header-left 
  margin-left: -0.5rem;

.navbarheader .header-title 
  flex-grow: 2;
  text-align: center;
  background: linear-gradient(to right, gray 50%, lightgray 50%);

.navbarheader .header-right 
  margin-right: -0.5rem;

.navbarheader >:last-child 
  margin-left: 2.5rem;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="navbarheader">
  <div class="header-left">
    <button type="button" class="pull-left btn-nav-menu">
      <i class="navbar-text fa fa-fw fa-navicon"></i>
    </button>
    <button type="button" class="pull-left" ng-click="ui.showSearch()">
      <i class="navbar-text fa fa-fw fa-search"></i>
    </button>
  </div>
  <div class="header-title">
    <div class="navbar-brand">whatever text</div>
  </div>
  <div class="header-right">
    <button class="btn-watchlist pull-right" ng-click="ui.toggleWatchlists()">
      <i class="navbar-text fa fa-fw fa-binoculars"></i>
    </button>
  </div>
</div>

【参考方案4】：

在不破坏响应能力的情况下以您可以承受的数量分配您的标题。这样您就有一个完美的居中量，并且每边都有相等的量用作排水沟或边距。

.navbarheader .header-left 
  margin-left: -0.5rem;
    width:20%; /* adjust accordingly if it's too much. do the same in the other to complete 100% total */
    background: red;

.navbarheader .header-title 
  flex-grow: 2;
  text-align: center;
    width:60%;
    background: yellow;

.navbarheader .header-right 
  margin-right: -0.5rem;
    width:20%;
    background: green;

查看demo（我为背景着色，以便您区分距离）

【参考方案5】：

用负边距修复它...将文本和margin-left 居中以减去左侧图标宽度的一半。

【讨论】：

成功了。不敢相信我没想到。我现在感觉很笨！

真的应该使用正数margin-right，因为当您缩小视口时，左侧的负边距会使文本与左侧的图标重叠