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中包含2个元素。

<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。

Answer 4

您希望将标签设置为display: table-cell，然后将其垂直对齐：

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

这是一个结果的jsfiddle：http://jsfiddle.net/V7mYR/1/

使用CSS中心文本

4 个答案: