如何集中一个图标和一个段落
这个问题在这里已经有了答案：
在img上设置display和vertical-align属性
.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> 由于你的图像是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>尝试使用flex css
.title {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
}
.title img {
margin-right: 8px;
}