用CSS居中显示文本

Question

我正在使用下面的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%);
}

我有两个元素包含在一个div中。

<div id="header">
    <p:graphicImage value="/dbimages/#{accountManagedBean.imageId}" styleClass="imageResizeAccountInfo"/>
    <h:outputLabel value="#{accountManagedBean.account.userName}" style="font-size:40px"/> 
</div>

一个是图像，另一个是文本。我想图像是在左边，文本是垂直和水平居中。

实际生成的HTML如下：

    <div id="header">
        <img id="mainForm:j_idt164" src="/ui/dbimages/2805" alt="" class="imageResizeAccountInfo" />
        <label style="font-size:40px">dvargo</label> 
    </div>

目前，它们就在彼此的旁边。我是css的新手，到目前为止，我已经使用组合创建了这个。

有没有办法做到这一点？

Answer 1

您已经在div上设置了宽度和高度，因此下面的附加CSS规则将允许div接受其内容的垂直对齐方式。

display:table-cell; vertical-align:middle

您可以在图像上使用float: left或position: relative; top: xxx; left: xxx;，通过浮动将其定位到左侧，或者相对于div的左上角精确定位到左侧。另一个好的解决方案是使用图像作为div的背景(使用no-repeat)，然后在div元素上使用padding-left为图像腾出空间。

JS菲德尔:示例(有一个可爱的笑脸图像，因为我没有OP的原始图像)：http://jsfiddle.net/wCpfs/

Answer 2

可以使用line-height属性将文本垂直居中。以及使用text-align:center将使您的文本移动到中心。

试试这个或类似的东西：

#header {
   text-align:center;
   line-height:150px;
}

Answer 3

在某种程度上，因为你已经指定了高度，所以你可以把文本放在中间。

.imageResizeAccountInfo {
 float:left;
}
#header p {
  position relative;
  left: XXX;
  top: YYY;
}

相应地调整XXX和YYY。