根據左DIV高度垂直對齊右DIV

根據紅DIV的高度，垂直對齊我的列表項目（原因1，原因2等）的最佳方式是什麼（紅色DIV的高度被驅動由左邊大文本的大小決定）而不給DIV的固定高度？我試圖display:inline-block + vertical-align:middle但沒有成功http://jsfiddle.net/ggfcN/1/根據左DIV高度垂直對齊右DIV

enter image description here

HTML

<div class="wrapper"> 
<div class="block-left bigtext">Pouquoi<br>faire appel<br> à nos services?</div> 
<div class="block-right"><ul class="bullets1-alt"> 
     <li><i class="fa fa-check"></i> Reason 1</li> 
     <li><i class="fa fa-check"></i> Reason 2</li> 
     <li><i class="fa fa-check"></i> Reason 3</li> 
     </ul> 
</div> 
</div>

CSS：當您使用箱大小

.bullets1-alt li { 
    margin-bottom: 3px; 
    margin-left: 30px; 
    padding: 0px; 
    color: #333; 
    list-style-type: none; 
    font-weight: 300; 
    font-size: 14px; 
} 

.bigtext { 
    color: #124191; 
    font-weight: 600; 
    font-size: 53px; 
    text-align: right; 
    line-height: 53px; 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

.wrapper { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
    overflow: hidden; 
    background: red; 

} 

.block-left { 
    float: left; 
    box-sizing: border-box; 
    padding-right: 20px; 
    width: 50%; 

} 
.block-right { 
    float: right; 
    overflow: hidden; 
    box-sizing: border-box; 
    width: 50%; 
}

來源

2013-12-21 Greg

寫：

.block-left, .block-right { 
    display:table-cell; 
    vertical-align:middle; 
    padding:30px 0; 
    height:100%; 
} 
.wrapper { 
    display:table; 
}

從.block-right和float:left從.block-left

Updated fiddle here.

來源

2013-12-21 18:27:37 Hiral

非常感謝。這個工作，但我仍然希望能夠水平放置右邊的DIV到容器（包裝）的最右邊，並把DIV留在容器（包裝）的最左邊。有沒有辦法做到這一點？在您的解決方案中，兩個DIV都水平對齊到包裝的中心。再次感謝您的幫助 – Greg

@Greg歡迎:)你想[這樣的事情??]（http://jsfiddle.net/ggfcN/5/） – Hiral

不完全，但我認爲這是值得一個新的和單獨的問題。你已經解決了我的第一個問題，非常感謝！ – Greg

你仍然需要一些瀏覽器供應商前綴：

.block-left { 
    float: left; 
    -moz-box-sizing:border-box; 
    box-sizing: border-box; 
    padding-right: 20px; 
    width: 50%; 

}

來源

2013-12-21 18:27:29

刪除float:right您可以使用inline-block的，但首先你需要刪除浮動

http://jsfiddle.net/ggfcN/4/

<div class="wrapper"> 
    <div class="block block-left bigtext"> 
     Pouquoi<br>faire appel<br> à nos services? 
    </div><div class="block block-right"><ul class="bullets1-alt"> 
      <li><i class="fa fa-check"></i> Reason 1</li> 
      <li><i class="fa fa-check"></i> Reason 2</li> 
      <li><i class="fa fa-check"></i> Reason 3</li> 
      </ul> 
    </div> 
</div>

.bullets1-alt li { 
    margin-bottom: 3px; 
    margin-left: 30px; 
    padding: 0px; 
    color: #333; 
    list-style-type: none; 
    font-weight: 300; 
    font-size: 14px; 
} 

.bigtext { 
    color: #124191; 
    font-weight: 600; 
    font-size: 53px; 
    text-align: right; 
    line-height: 53px; 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

.wrapper { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
    overflow: hidden; 
    background: red; 

} 

.block { 
    vertical-align: middle; 
    display: inline-block; 
    overflow: hidden; 
    box-sizing: border-box; 
    width: 50%; 
}

來源

2013-12-21 18:33:04 South

根據左DIV高度垂直對齊右DIV

回答

相關問題