How to centralize an icon and a paragraph in one line

Question

I'm trying to centralize an icon and a paragraph in the header of application. Currently it looks like this.

I want to show an icon and a paragraph with same height. I added padding-bottomto make it happen though it didn't work.

sample.js (The application is made with 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;
}

Edit : This question was marked as duplicate with Vertically align text next to an image?. I didn't know about vertical align and I think there is people like me, so I would like to keep this question.

Try applying the same `line-height` to both of them – mersocarlin Sep 15 '17 at 11:38 — mersocarlin, Sep 15 '17 at 11:38

score 1 · Accepted Answer · answered Sep 15 '17 at 11:40

1

Set display and vertical-align property on 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>

answered Sep 15 '17 at 11:40

sol

20,947
5
36
56

Thank you, it worked perfectly. – aaayumi Sep 15 '17 at 11:51
1

No need to have `inline-block` in this case. – Chris Sep 15 '17 at 11:54
@Chris good point, your answer is cleaner – sol Sep 15 '17 at 11:58
Thank you for the advice. I will remove it. I needed to specify ```img``` together with className so I chose this one as a solution. – aaayumi Sep 15 '17 at 14:21

Chris · Answer 2 · 2017-09-15T11:48:05.930

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>

score 0 · Answer 3 · answered Sep 15 '17 at 11:39

0

Try to use flex css

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

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

answered Sep 15 '17 at 11:39

Artem Mirchenko

2,100
1
7
21

score 0 · Answer 4 · answered Sep 15 '17 at 11:39

0

Try giving a line-height to the text with the same height of the image.

Example

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

answered Sep 15 '17 at 11:39

bennygenel

22,268
6
60
76

score 0 · Answer 5 · answered Sep 15 '17 at 11:41

You can use vertical-align: middle on the 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>

How to centralize an icon and a paragraph in one line

5 Answers5