Question

我正在尝试垂直对齐我的示例中的第二个div。一个div中的文本可以有所不同，可以是1-50个字符。第二个div可以有4-7个字符，但如果一个div中的文本较大，则需要垂直对齐。

HTML

<div class="wrap">
    <div class="two">result</div>
    <div class="one">This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string</div>
 </div>

CSS

div.wrap 
{
    width: 200px;
}

div.one {
    border: 1px solid #AAAAAA;
    white-space: normal;
    word-wrap: break-word;
}
div.two {
    background-color: #7bbf7b;    
    float: right;
}

http://jsfiddle.net/mg5wpmur/

Answer 1

使用显示表。

Have an example!

HTML

<div class="wrap">        
    <div class="one">This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string</div>
    <div class="two">result</div>
 </div>

CSS

div.wrap 
{
    width: 200px;
    display: table;
}

div.one {
    border: 1px solid #AAAAAA;
    white-space: normal;
    word-wrap: break-word;
    display: table-cell;
}
div.two {
    background-color: #7bbf7b;    
    display: table-cell;
    vertical-align: middle;
}

两个水平对齐的div与垂直对齐的内部div

1 个答案: