center divs inside divs vertically

Question

Let's say I have 2 divs inside a container div like so:

<div id="wrapper">
    <div id="title">A</div>
    <div id="text">Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... </div>
</div>

As you can see from the title, I'm trying to align the divs title and text vertically and next to each other inside the parent div wrapper. So far my css is this:

#wrapper
{       
    vertical-align:middle;
    display:table-cell;
}

#title
{
    background: url('path_to_purple_background') no-repeat;
    width:45px;
    height:45px;
    color:white;    
}

#text {
    width: 700px;
}

#title, #text {
    display: inline-block;
    vertical-align: middle;
}

But what I get so far is that the letter A is not centered inside my div title (it is instead positioned at the top-left corner of the div). Does anybody have an idea how I can fix this?

Thank you

possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Donal Fellows, Nov 26 '12 at 11:08
Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:24

score 1 · Accepted Answer · answered Nov 25 '12 at 19:36

1

Just a thought, but there is a text-align:center property that you can add into #title as well as line-height:HEIGHT OF #TITLE; you can add. This will align the A to the center of the circle, as well as set the line-height of the A to match the height of the circle container, thus vertically aligning it to the middle.

answered Nov 25 '12 at 19:36

Felix Guo

2,700
14
20

It works, but not in IE7, how can I make this work for IE7 also? – user765368 Nov 25 '12 at 19:42
I'm assuming the lineHeight doesn't work, so you can use ``. This will apply a different line height for IE7. – Felix Guo Nov 25 '12 at 20:09

score 0 · Answer 2 · answered Nov 25 '12 at 19:25

0

How about something like this? I set the display property of #test, #title to table-cell.

answered Nov 25 '12 at 19:25

Manuel Leuenberger

2,327
3
21
27

The div `title` grows as the text in the div `text` grows, I don't want that. – user765368 Nov 25 '12 at 19:28
Just noticed that, `inline-block` seems like a better solution for that. I'll try to find out why the `vertical-align` isn't effective. – Manuel Leuenberger Nov 25 '12 at 19:31

score 0 · Answer 3 · answered Nov 25 '12 at 19:50

The use of vertical-align gets mistaken very often.

From the W3C:

The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

So if you have got an inline image in an paragraph, you can use it to vertical-align it within a rule of text.

In your case, if you need to vertical-align only one rule, you can use the old line-height trick:

#title {
  height: 45px;
  width: 45px;
  line-height: 45px;
}

center divs inside divs vertically

3 Answers3