如何将图标和段落集中在一行中

Question

我正在尝试将图标和段落集中在应用程序的标题中。目前它看起来像这样。

我想显示一个图标和一个高度相同的段落。我添加了padding-bottom来实现它虽然不起作用。

sample.js（该应用程序使用React.js）

<div className="title"><img src={title} className="title" alt="title" />SAMPLE TITLE</div>

index.css

.title {
text-decoration: none;
background-color: #454545;
color: white;
padding-bottom: 10px;
}

编辑： 此问题已被Vertically align text next to an image?标记为重复。我不知道vertical align，我认为有人喜欢我，所以我想保留这个问题。

Answer 1

在display

上设置vertical-align和img属性

.title {
  text-decoration: none;
  background-color: #454545;
  color: white;
}

.title img {
  display: inline-block;
  vertical-align: middle;
}

<div class="title"><img src='https://placehold.it/40x40' alt="title" />SAMPLE TITLE</div>

Answer 2

由于您的图像显示为inline，这是您要对齐的内容，而不是文本。只需使用vertical-align: middle属性即可。请查看MDN上的说明：

  

vertical-align CSS属性指定内联或表格单元格框的垂直对齐方式。

const MyApp = () => <div className="title">
  <img src="http://via.placeholder.com/50x50" className="title" alt="title" /> SAMPLE TITLE
</div>;
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

.title {
  text-decoration: none;
  background-color: #454545;
  color: white;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 3

尝试使用flex css

.title {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-content: center;
 align-items: center;
}

.title img {
 margin-right: 8px;
}

Answer 4

尝试使用相同line-height的图片为文本提供height。

示例

<div className="title">
  <img src={title} style={{ height: 25 }} className="title" alt="title" />
  <span style={{lineHeight: 25}}>SAMPLE TITLE</span>
</div>

Answer 5

您可以在vertical-align: middle上使用img。

.title {
  text-decoration: none;
  background-color: #454545;
  color: white;
  padding: 5px;
}

.title img {
  border-radius: 100%;
  margin-right: 10px;
  vertical-align: middle;
}

<div class="title"><img src="http://via.placeholder.com/50x50" alt="title" />SAMPLE TITLE</div>