0

我有一个div需要以垂直方式对齐文本的位置，例如列表（ul/ li）。我尝试了列表、表格单元格、段落和其他一些东西，但没有成功。我的大多数尝试都导致结果超出了我包含的 div.header和.headerright.

这是我的精简代码：

HTML：

<div class="header">
    <div class="headerleft">
    </div>
    <div class="headerright">
            Line 1 Text
            Line 2
    </div>
</div>

CSS：

div.header {
    height:75px;
    background-color:#FFF;
    padding-left:10px;
    padding-right: 10px;
}
    div.headerleft {
    border: none;
    float: left;
    margin: 0;
    padding: 0;
    line-height: 75px;
}

div.headerright {
    border: none;
    float: right;
    margin: 0;
    padding: 0;
    line-height: 75px;
}

我需要的是文本“第 1 行文本”和“第 2 行”显示在列表中，“第 2 行”出现在“第 1 行文本”下。这个文本块应该在包含的 div 中居中，“第 2 行”应该在“第 1 行文本”下居中，如下所示：

第 1 行文本
   第 2 行

我唯一关心的浏览器是IE9。如何才能做到这一点？我难住了。

4

2 回答 2

1

将文本放入span元素中。这个对我有用。

CSS：

div.headerright {
    border: none;
    float: right;
    margin: 0;
    padding: 0;
}

/* css rule to display span elements.  */
span{
    display:block;
}

HTML：

<div class="header">
    <div class="headerleft">
    </div>
    <div class="headerright">
        <span>Line 1 Text</span>
        <span>Line 2</span>
    </div>
</div>
于 2012-05-13T22:10:37.373 回答
0

您的问题似乎您已尝试多次更改您的 html。一个非常简单的方法是添加一个<br /> and use text-align:center.

现场示例：http: //jsfiddle.net/WPBNr/

HTML：

<div class="header">
    <div class="headerleft">
    </div>
    <div class="headerright">
            Line 1 Text<br /> <!-- Added break tag -->
            Line 2
    </div>
</div>

CSS：

.headerright{
    border: none;
    float: right;
    margin: 0;
    padding: 0;
    line-height: 75px;
    text-align: center; /* add this */
}
于 2012-05-13T21:52:47.677 回答