How to centralize an icon and a paragraph in one line

This question already has an answer here:

Vertically align text next to an image? 20 answers

---

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

---

Since your image is displayed inline that's what you want to align, not the text. Just use the vertical-align: middle property. Take a look at the description over at MDN:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

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

链接地址: http://www.djcxy.com/p/41544.html

上一篇: 居中图像和文本

下一篇: 如何集中一个图标和一个段落