CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12527

Vertically align link within div

This is my code: http://jsfiddle.net/spadez/Z3he9/

I've been trying to align the green circle vertically within the white box, but I'm struggling on how it should be approached.

Using vertical-align: center; does nothing if applied to the circle.

Can anyone explain how it should be done please, in the most semantically correct way.

Upvotes: 0

Views: 208

Answers (4)

Lucas Bernardo de Sousa
Lucas Bernardo de Sousa

Reputation: 78

As said by Dave Mroz, removing the display:block from .title should do the trick for you. But in order to keep the .box element's original dimensions from you fiddle, you should also clear the floats after .title and .number.

Like this.

Upvotes: 0

Sid
Sid

Reputation: 801

You need to change your CSS like this way

.box {
background-color: white;
padding: 30px;
margin-bottom: 30px;
border-radius:4px;
height:30px;
}

.title {color: rgb(15, 15, 15);
font-family: myriad-pro, Helvetica, sans-serif;
font-size: 24px;
margin-bottom: 20px;
display:block;
float:left;
}

Working Fiddle

Upvotes: 0

Paul Redmond
Paul Redmond

Reputation: 3296

vertical-align will not work with floated elements as floats are not within the normal 'flow' of the document. You can use vertical align with inline or inline-block elements.

.title{
       display: inline-block;
       vertical-align: middle;
    }

Remove float: right; from .number.

Upvotes: 1

Dave Mroz
Dave Mroz

Reputation: 1489

Remove the display:block attribute from the title class and that should do the trick.

Upvotes: 2

Related Questions