How to center text inside a div element?

Question

How to center the text inside the div? I have the following css code: Should I use line-height property to center the text?

.activebox {
display: inline-block;
width: 40px;
height: 16px;
/*line-height: 20px;*/
background-color: #47DA91;
}

.triangle-left {
display: inline;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 10px solid #47DA91;
border-bottom: 8px solid transparent;
float: left;
}

.activebox p {
color: white;
 }

and also the html code:

<div class="triangle-left"></div>
<div class="activebox"><p>Active</p></div>

Here is the jsfiddle example

Thank you.

use `text-align:center;` property in css. Also in your fiddle, there is another closing `` tag, why it is there? — Vedant Terkar, Jul 10 '14 at 07:37
@VedantTerkar No no no ! `` is deprecated as of HTML5 and should NOT be used. — Clément Malet, Jul 10 '14 at 07:38
@plywoods if you are talking about single line text; then you are allow to use `line-height` property. — Kheema Pandey, Jul 10 '14 at 07:40
Hi @plywoods. I don't think it's worth of me doing that but can you fix your title? iside -> inside. Thanks. — , Jul 10 '14 at 07:42

Nope · Accepted Answer · 2014-07-10T07:55:46.830

2

Add display: table-cell to the <p> tag itself, similar to this:

.activebox p{
    display: table-cell;
}

In addition, either removed the line-height: 22px style from the .activebox as it off-sets the text vertically or only set it to the max height of the triangle which is line-height: 16px, then it will still look perfect.

.activebox {
    display: inline-block;
    width: 40px;
    height: 16px;
    /*line-height: 22px;*/
    line-height: 16px; /* set to 16px or remove all together*/
    background-color: #47DA91;
}

DEMO - Using display: table-cell

edited Jul 10 '14 at 07:55

answered Jul 10 '14 at 07:47

Nope

22,147
7
47
72

http://jsfiddle.net/YY9L5/1/ i changed the div height and width it dosent work. – Sudheer Jul 10 '14 at 07:57
Thank you. It works. However, It ihas strange behaviour when I change the font-size and change the page scale. – plywoods Jul 10 '14 at 08:00
@plywoods: If you are designing a static site the font-size or height never changes and is only set at design time where you also adjust the rest of the CSS as needed. However, if you are working on a responsive site you might want to look at setting the base font size to an em (or rem as required) value instead. You could then use % in line-height, height and other font-sizes settings. Changing them per display breakpoint as needed. That should then just flow together....I believe. – Nope Jul 10 '14 at 08:08
@SaiRamSudheer: You should propably ask this in a new question if you have a requirement other than OP's. However, if you must compensate for bigger arrows you can always add `text-align: center; width: inherit` to the `.activebox p` styles. Also don't forget to add line-height to be the same as the height. See [**fiddle**](http://jsfiddle.net/tvFaa/) - play around with it if you have other requirements, adding `border: 1px solid red` to the `.activebox p` style helps visualize the changes you make. – Nope Jul 10 '14 at 08:14

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

It's also possible to use the "display: table-cell" property.

Vertically align text in a div

edited May 23 '17 at 10:26

Community

1
1

answered Jul 10 '14 at 07:38

OddDev

3,644
5
30
53

score 0 · Answer 3 · answered Jul 10 '14 at 07:49

.activebox {
   background-color: #47da91;
   display: inline-block;
   height: 16px;
   line-height: 0;
   position: relative;
   text-align: center;
   top: -1px;
   width: 40px;
 }
.triangle-left {
   border-bottom: 8px solid transparent;
   border-right: 10px solid #47da91;
   border-top: 8px solid transparent;
   display: inline;
   float: left;
   height: 0;
   width: 0;
 }
 .activebox p {
   color: white;
   font-size: 11px;
   position: relative;
   top: -3px;
}

enter image description here

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

Add following style for your .activebox class.

display: flex;
align-items: center;

Fiddle

References

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 10 '14 at 08:04

Ramasamy Kasi

171
3
3

Tatinfo · Answer 5 · 2014-07-25T14:40:10.603

-1

text-align : center; in your css class

edited Jul 25 '14 at 14:40

answered Jul 10 '14 at 07:39

Tatinfo

37
4

It seems the issue is vertical alignment not horizontal alignment. – Nope Jul 10 '14 at 07:49

How to center text inside a div element?

5 Answers5

References