CSS Vertically center text in paragraph/div ...?

Question

I have a paragraph <p class="timeNum">00:00</p> (only one element with text in it) and I want to move only the text in the middle/top/bottom of the text area (i don't mean vertically in the paragraph, but in it's own text area(the blue area when we mark the text with the mouse)). When I change the line-height to be equal to the font-size, it doesn't help. Vertical-align doesn't help also. The text area becomes smaller, but the text stays at the bottom/baseline. Can anyone suggest a solution. Thanks!

html -> <p class="timeNum">Text</p>

css ->

 .timeNum {
    font-size: 24px;
    line-height: 24px;
    text-align: right;
  }

text in a paragraph

The things you're talking about ("blue area") imply you are using a service or an app to edit the html. What service or app are you using? — Ouroborus, Aug 14 '16 at 11:20
No, I'm not using anything, I just ment the area when you mark a text with the mouse. — ikken32, Aug 14 '16 at 11:26

score 1 · Answer 1 · edited May 23 '17 at 11:45

1

You should try

display: table-cell;
vertical-align: middle;

For even more information, you may have a look to this SO post

edited May 23 '17 at 11:45

Community

1
1

answered Aug 14 '16 at 11:22

dtlvd

457
1
8
21

score 1 · Answer 2 · answered Aug 29 '17 at 14:09

If it has a wrapper you could try this:

.wrapper { 
postion: relative
}
.textNum {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

This positions everything in the middle of its parent element. In theory it should work. This is because the top and left values orient themselves at the width of the parent. But the translate values orient themselves at the width of the element itself.

score 0 · Answer 3 · answered Aug 14 '16 at 15:34

just try with this

.border-box {
  width:200px;
  height:200px;
  border:1px solid #ddd;
  float:left;
  text-align:center;
  display:table;
}
.border-box p {
  display:table-cell;
  vertical-align:middle;
}

<div class="border-box">
  <p>this is for your information</p>
</div>

CSS Vertically center text in paragraph/div ...?

3 Answers3