如何将带有图标的标题水平居中，忽略图标答案

【问题标题】：How to center a heading with an icon horizontally, ignoring the icon如何将带有图标的标题水平居中，忽略图标
【发布时间】：2016-12-03 16:38:05
【问题描述】：

我正在使用 flexbox 将带有图标的标题居中。我试图将标题的文本部分完美居中，忽略图标。图标应该在文本居中后添加到标题的右侧。我尝试使用绝对定位，但效果不佳，因为当浏览器宽度变小时我还需要换行。

在我的示例中，整个标题居中。有了图标，它就会使文本不居中。

html

<div class="container">
  <div class="wrapper">
    <div class="image"></div>
      <div class="heading">
        <span class="title">racecar racecar racecar</span>
        <span class="fa fa-lg fa-car">
        </span>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida.
      </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
      <div class="heading">
        <span class="title">kayak kayak kayak</span>
        <span class="fa fa-lg fa-car">
        </span>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
      </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
      <div class="heading">
        <span class="title">rotor rotor rotor</span>
        <span class="fa fa-lg fa-car"></span>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
      </div>
  </div>
</div>

css

.wrapper {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  height: 100px;
  width: 100px;
  background-color: blue;
  border-radius: 65px;
}

.title {
  font-size: 50px;
}

.description {
  padding: 15px;
}

jsfiddle

【问题讨论】：

由于 flex 容器通过空间分布来对齐项目，当您只有一侧有一个项目时，这会造成不平衡，使居中的兄弟姐妹偏离中心。一种解决方案是创建一个图标的副本，用visibility: hidden 放在对面（左侧）。这将平衡事情。这是完整的解释和其他选项：stackoverflow.com/q/38948102/3597276
查看我的更新答案。
您是否需要使用 flexbox，或者其他东西也可以（如果有效）？另外，如果文本换成 2 行，您希望图标在哪里结束？
@andi 我需要图标始终位于标题文本的末尾。我也希望文本在包裹到 2 行时保持完全居中（但我觉得这可能是不可能的）

标签： html css flexbox

【解决方案1】：

你的问题有点误导。您真正的问题发生在 heading 内部，thai 不是 flex 元素。

你可以给这个元素添加一个与图片大小相同的margin-left：

.heading {
  margin: 0px 30px;
  text-align: center;
  position: relative;
}

.fa {
  position: absolute;
  right: -30px;
  top: 30px;
}

.wrapper {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.image {
  height: 100px;
  width: 100px;
  background-color: blue;
  border-radius: 65px;
}
.title {
  font-size: 50px;
}
.description {
  padding: 15px;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">racecar racecar racecar</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">kayak kayak kayak</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia
      nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">rotor rotor rotor</span>
      <span class="fa fa-lg fa-car"></span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod
      bibendum. Duis congue.
    </div>
  </div>
</div>

【讨论】：

这样一个简单的答案，看起来很棒，除了当我使浏览器宽度变窄时会导致自动换行。我忘了将text-align: center 添加到.heading。我很怀疑，但是在自动换行后是否可以保持文本的精确居中？
我添加了文本对齐，并将图像绝对定位。可以修改对齐方式以更好地适应您想要的结果

【解决方案2】：

您可以通过将.heading 内的.fa 设置为向右浮动并具有负的右边距（与元素的字体大小相同）来解决此问题：

.heading .fa {
  float: right;
  margin-right: -1.33333333em;
  margin-top: -30px;
}

我还需要设置margin-top 以确保元素定位正确。

仅作为示例 - 我在悬停时添加了 display:none 以表明该图标不会影响文本的居中。你应该删除它:)

这是一个工作示例：

.wrapper {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  height: 100px;
  width: 100px;
  background-color: blue;
  border-radius: 65px;
}

.title {
  font-size: 50px;
}

.description {
  padding: 15px;
}
.heading .fa {
  float: right;
  margin-right: -1.33333333em;
  margin-top: -30px;
}
.heading:hover .fa {
  display: none;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">racecar racecar racecar</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">kayak kayak kayak</span>
      <span class="fa fa-lg fa-car">
        </span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia
      nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue.
    </div>
  </div>
  <div class="wrapper">
    <div class="image"></div>
    <div class="heading">
      <span class="title">rotor rotor rotor</span>
      <span class="fa fa-lg fa-car"></span>
    </div>
    <div class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod
      bibendum. Duis congue.
    </div>
  </div>
</div>

【讨论】：

感谢您的回答。在我缩小浏览器的宽度之前，它看起来很棒。当标题换行时，它会被破坏，因为图标不会停留在标题的末尾。
您需要决定当屏幕变小时要做什么。也许改变字体大小？