Question

我有一个div，我需要以垂直方式对齐文字，例如列表（ul / li）。我已经尝试过列表，表格单元格，段落和其他一些内容但没有成功。我的大多数尝试都会导致结果超出我的内容 - .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;
}

我需要的是“Line 1 Text”和“Line 2”这样的文字，就像在“Line 1 Text”下出现的“Line 2”一样。这个文本块应该在包含div的中心，“Line 2”应该在“Line 1 Text”的中心，如下所示：

第1行文字
第2行

我唯一关注的浏览器是IE9。如何才能做到这一点？我很难过。

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

Answer 2

您的问题似乎已经尝试多次更改您的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 */
}

在Internet Explorer 9中将Div中列表中的文本与CSS对齐

2 个答案: