PDA

View Full Version : Need help align spans inside a div



mattshiao
Aug 27th, 2010, 12:25 AM
Hi,

I have the following html and inline css:

<div id="container" style="height: 34px; width: 100%; border:1px solid #333">
<span id="largeText" style="font-size: 22px">Large text</span>
<span id="smallText" style="font-size: 12px">Small text</span>
</div>

I want to
(1) Vertically align both largeText and smallText to the center of the div
(2) Horizontally largeText will be attached to the left with 5px margin on left and smallText will be attached to the right with 5px margin on right.

Please help

abduraooft
Aug 27th, 2010, 08:02 AM
(1) Vertically align both largeText and smallText to the center of the div

#container span{
display:block;
text-align:center;
}

(2) Horizontally largeText will be attached to the left with 5px margin on left and smallText will be attached to the right with 5px margin on right.

span#largeText{
text-align:left;
margin-left:5px;
}
span#smallText{
text-align:right;
margin-right:5px;
}

(The above CSS doesn't actually move the entire element)