根据左DIV高度垂直对齐右DIV
格雷格
什么是基于红色DIV的高度（红色DIV的高度取决于左侧大文字的大小）垂直对齐列表项（原因1，原因2等）的最佳方法给DIV固定高度？我尝试了display:inline-block+vertical-align:middle但没有成功http://jsfiddle.net/ggfcN/1/
的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%;
}
手性
写：
.block-left, .block-right {
display:table-cell;
vertical-align:middle;
padding:30px 0;
height:100%;
}
.wrapper {
display:table;
}
float:right从.block-right和float:left从中删除.block-left
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
根据浮动图片的高度垂直对齐div中的文本
- 2
根据浮动图像的高度垂直对齐div中的文本
- 3
Div垂直对齐
- 4
<div>垂直对齐
- 5
Div垂直对齐
- 6
围绕左浮动div垂直对齐div
- 7
在高度可变的父级中垂直对齐div
- 8
Twitter Bootstrap：将子div与高度垂直对齐
- 9
垂直对齐2个浮动div，高度灵活
- 10
如何垂直对齐图像，即动态高度旁边的div
- 11
Twitter Bootstrap：将子div与高度垂直对齐
- 12
如何垂直对齐图像，即动态高度旁边的div
- 13
在浮动div内垂直对齐元素，高度未知
- 14
垂直对齐固定的div
- 15
使DIV在中间垂直对齐
- 16
div垂直对齐中心
- 17
垂直对齐选定的div
- 18
在div中垂直对齐div
- 19
在div中垂直对齐div
- 20
div内部的div不垂直对齐
- 21
在div内垂直对齐div
- 22
始终使DIV垂直对齐DIV
- 23
在 div 中垂直对齐 div，以及
- 24
在具有高度自动和最小高度设置的父级中垂直对齐div？
- 25
将子div元素与具有动态高度的父div垂直对齐
- 26
将 div 垂直对齐到未知高度 div 而不影响水平居中
- 27
浮动时垂直对齐div
- 28
在div中垂直对齐img？
- 29
div内的垂直对齐范围
我来说两句