center a text inside a div

Question

i would like to know how could i center my text inside a div. in my code this isn't work will for every p-tag, cause text length are not the same.

HTML:-

<div class="textBlock">
  <p>text text text</p>
</div>

CSS:-

#content .textBlock {
 position: relative;
 text-align: center;
 width: 100%;
 float: left;
 display: block;
 min-height: 160px;
}

#content .textBlock p {
 position: absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 font-size: 28px;
 font-family: Helvetica, Arial;
 font-weight: 100;
 padding: 0 5%;
 line-height: 34px;
 letter-spacing: 0.1em; 
}

Aaron · Answer 1 · 2015-09-09T13:17:23.163

0

not sure what all the other code is for if you're only aligning text?

.textBlock {
 text-align: center;
 min-height: 160px;
}

.textBlock p {
 font-size: 28px;
 font-family: Helvetica, Arial;
 line-height: 34px;
 letter-spacing: 0.1em; 
}

<div class="textBlock">
  <p>text text text</p>
</div>

edited Sep 09 '15 at 13:17

answered Sep 09 '15 at 13:15

Aaron

10,187
3
23
39

That's right, it's the absolute positioning that causes the problem. Not sure if this is the answer though; what if the OP does need the absolute positioning? – Mr Lister Sep 09 '15 at 13:16

score 0 · Answer 2 · answered Sep 09 '15 at 13:29

please Try this one:

Html:

<div class="textBlock">
  <p>text text text</p>
</div>

Css:

.textBlock {
 text-align: center;

    background-color:gray;
}

.textBlock p {
 font-size: 28px;
 font-family: Helvetica, Arial;
 line-height: 34px;
 letter-spacing: 0.1em; 
    color:white;
}

DEMO

center a text inside a div

2 Answers2