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

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

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

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

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

这是一个有效的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

如何使标题水平居中，忽略图标

1 个答案: