CODEWITHSUNDEEP
htmlcss
user489041
user489041

Reputation: 28312

Center text with CSS

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?

Upvotes: 0

Views: 102

Answers (4)

Joseph Myers
Joseph Myers

Reputation: 6552

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/

Upvotes: 2

nzifnab
nzifnab

Reputation: 16120

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/

Upvotes: 0

wholenewstrain
wholenewstrain

Reputation: 319

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.

Upvotes: 0

Leonardo Ferreira
Leonardo Ferreira

Reputation: 106

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;
}

Upvotes: 0

Related Questions