0

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

我有 2 个元素包含在一个 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 新手，到目前为止，我已经使用组合创建了这个。

有没有办法做到这一点？

4

4 回答 4

2

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

display:table-cell; vertical-align:middle

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

JS Fiddle：示例（带有可爱的笑脸图像，因为我没有 OP 的原始图像）：http: //jsfiddle.net/wCpfs/

于 2013-09-11T20:42:00.013 回答
0

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

试试这个或类似的东西：

#header {
   text-align:center;
   line-height:150px;
}
于 2013-09-11T20:41:49.887 回答
0

您将希望将标签设置为 adisplay: 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/

于 2013-09-11T20:46:15.823 回答
0

有点，仅仅因为您指定了高度，您就可以将文本放置在中间。

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

相应地调整 XXX 和 YYY。

于 2013-09-11T20:43:18.507 回答