0

リスト（ / ）divのようにテキストを縦に並べる必要がある場所があります。リスト、テーブルセル、段落などを試しましたが、成功しませんでした。私の試みのほとんどは、結果が私の含まれているdivの外にある原因になりました-そして。ulli.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行目」が表示されているリストのように表示される「1行目テキスト」と「2行目」というテキストです。このテキストのブロックは、含まれている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 に答える