Center text with CSS - html

Question

I am using the following css
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 150px;
margin: 10px 0px 5px 0px;
background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
}
I have 2 elements contained in a div.
<div id="header">
<p:graphicImage value="/dbimages/#{accountManagedBean.imageId}" styleClass="imageResizeAccountInfo"/>
<h:outputLabel value="#{accountManagedBean.account.userName}" style="font-size:40px"/>
</div>
One is an image, and the other is text. I would like the image to be on the left, and the text to be vertically and horizontally centered.
The actual HTML that gets produced is this:
<div id="header">
<img id="mainForm:j_idt164" src="/ui/dbimages/2805" alt="" class="imageResizeAccountInfo" />
<label style="font-size:40px">dvargo</label>
</div>
Currently they are right next to each other. I am new to css and have created this using composition so far.
Is there a way to do this?

Answer 1

You already have the width and height set on your div, so the following additional CSS rules will allow your div to accept vertical alignment for its content, i.e., your text.
display:table-cell; vertical-align:middle
You can use float: left or position: relative; top: xxx; left: xxx; on your image to position it to the left by floating, or to left relative to the top left of the div by a precise amount. Another good solution is to use the image as the background of the div (with no-repeat), and then using padding-left on your div element to make room for the image.
JS Fiddle: example (with a cute smiley face image since I don't have the OP's original image): http://jsfiddle.net/wCpfs/

Answer 2

You can use line-height property to center the text vertically.
As well as using text-align:center will make your text move to the center.
Try this or something similar:
#header {
text-align:center;
line-height:150px;
}

Answer 3

Kinda, just because you have height specified you can position text in the middle.
.imageResizeAccountInfo {
float:left;
}
#header p {
position relative;
left: XXX;
top: YYY;
}
Adjust XXX and YYY accordingly.

Answer 4

You're going to want to set the label to be a display: table-cell and then vertically align it like this:
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 150px;
margin: 10px 0px 5px 0px;
background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
display: table;
}
#header label{
display: table-cell;
vertical-align: middle;
text-align: center;
}
Here's a jsfiddle with the result: http://jsfiddle.net/V7mYR/1/