html - 如何水平居中带有图标的标题，忽略图标

Question

我正在使用 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

Answer 1

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

您可以只向该元素添加与图像相同大小的边距:

.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>