Vertical and Horizontal alignment of text with CSS

Question

I'm trying to align a text, horizontally and vertically, inside a div box (with background color) but I'm not being able to do it.

I've searched online and margin: auto, text-align: center aren't doing the work.

Any tips?

Check FIDDLE.

HTML

<div id="services"><div class="holder container clearfix">
<div class="bgtop"><span class="top">Corte cabelo + Afiar</span></div>
<div class="bgprice"><span class="price">10€</span></div>
</div></div>

CSS

#services .holder .bgtop{
    background-color: #27ae60;
    height:50px;
    width:200px;
    z-index: 1;
}
#services .holder .bgprice{
    height:50px;
    width:90px;
    background-color: #272727;
    z-index: 1;
}
#services .holder span.top{
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 1.000em;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;  
    margin: auto;
    text-align: center;
}
#services .holder span.price{
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 1.500em;
    z-index: 2;
    text-align: center;
}

score 6 · Answer 1 · answered Mar 14 '14 at 01:39

6

Here is a common approach used for vertical/horizontal centering.

BASIC EXAMPLE HERE

div {
    background: red;
    width:100px;
    height: 100px;
    display:table;
}
div > span {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Basically, the parent element's display is changed to table. Add in a child element, in this case a span element to wrap the text. The span should have the properties display:table-cell/vertical-align:middle for vertical centering. Then text-align:center is simply for horizontal centering.

Here is an example using the styling you had.

answered Mar 14 '14 at 01:39

Josh Crozier

233,099
56
391
304

I've seen that aproach and I've tried but its not working for me – uniqezor Mar 14 '14 at 02:54
@uniqezor Did you look at the example? It works.. http://jsfiddle.net/SyQe7/ – Josh Crozier Mar 14 '14 at 02:55

score 2 · Answer 2 · answered Mar 14 '14 at 01:42

2

There are different ways. Here is one:

HTML:

<div>
    <span>magix!</span>
</div>

CSS:

div {
    text-align:center;
    display:table;
}
span { 
    display: table-cell;
    vertical-align:middle;
}

Fiddle

answered Mar 14 '14 at 01:42

Alain Jacomet Forte

4,575
6
29
41

Adam Zuckerman · Accepted Answer · 2014-03-14T03:02:36.840

2

You can change just your CSS to this (no HTML changes):

div{
  background: red;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  text-align: center;
  line-height: 100px;
}

The text-align is self-explanatory. The line-height forces the text to the center by matching the height of a single line to that of the div. You will have to adjust it to your needs each time.

JSFiddle

edited Mar 14 '14 at 03:02

answered Mar 14 '14 at 01:42

Adam Zuckerman

1,633
1
14
20

Can you edit to the way I have on the fiddle example? Im not getting it right, so it has no effect... – uniqezor Mar 14 '14 at 02:54
Sure, this works, but what if the height of the element is dynamic? – Josh Crozier Mar 14 '14 at 03:00
Things become a little more difficult. If you can change the HTML, then it makes sense to do what is shown in the other answers (e.g., display: table-cell;). You can also use javascript to set the line-height based on its container. There are other techniques that work in specific browsers, but do not work across the board. You will have to find all of the CSS hacks to make it work. – Adam Zuckerman Mar 14 '14 at 03:11

Vertical and Horizontal alignment of text with CSS

3 Answers3

Linked