4

I've got two divs that are circles because of a border-radius. They are inline-blocks, and have multiple lines of text inside:

http://jsfiddle.net/tmyie/hVNsZ/1/

However, I need to center these lines of text vertically within the div. Is this possible?

HTML:

<div class="circle">this is a sentence</div>

<div class="circle">this is<br>multiple<br>lines</div>

CSS:

.circle {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    background-color: orange;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}

2 Answers2

8

You have to put display as 'table-cell' and use vertical-align:middle. Here's the css:

.circle {
width: 90px;
height: 90px;
border-radius: 90px;
background-color: orange;
text-align: center;
display: table-cell;
overflow: hidden;
vertical-align:middle;
}

and fiddle:

http://jsfiddle.net/hVNsZ/6/

Th0rndike
  • 3,406
  • 3
  • 22
  • 42
  • just curious.....using `display: table-cell;` without parent `display: table;` div is suggested??? – NoobEditor Jan 23 '14 at 11:28
  • 1
    @NoobEditor: Sure, you can do that. [Anonymous table objects](http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes) are automatically generated to create a complete table structure. – thirtydot Jan 23 '14 at 11:32
  • Thanks, but how come these two are not centered with `margin: 0 auto` anymore? http://jsfiddle.net/tmyie/hVNsZ/12/ –  Jan 23 '14 at 11:41
  • Coz `text-align: center` is missing in ur fiddle. See this 1 http://jsfiddle.net/hVNsZ/13/ – Anup Jan 23 '14 at 11:46
1

vertical-align property will work only for the elements which are displayed table-cell

.circle {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    background-color: orange;
    text-align: center;
    display: table-cell;  //added
    overflow: hidden;
    vertical-align: middle; //aligned middle
}

JSFiddle

Praveen
  • 55,303
  • 33
  • 133
  • 164