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

Answer 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.