[英]Always vertical align DIV inside DIV
<ul>
<li>
<div class="imageBox">
<div class="imageActions">
<a href="#"><div class="box">link1</div></a>
</div>
</div>
</li>
<li>
<div class="imageBox">
<div class="imageActions">
<a href="#"><div class="box">link1</div></a>
<a href="#"><div class="box">link2</div></a>
</div>
</div>
</li>
</ul>
CSS: CSS:
ul { list-style: none; }
li { width : 200px; }
.imageBox {
with:196px;
height:100px;
position:relative;
background:#000;
overflow: hidden;
margin-bottom:2px;
}
.imageBox .box {
margin: 5px auto;
padding: 5px;
border:solid 1px #6f94e1;
background-color:#456fd3;
color:#FFF;
width:100px;
font-size:13px;
text-align:center;
}
.imageBox .imageActions {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display: none
}
.imageBox:hover .imageActions { display: block; }
I've two types of DIV, one is with single button and another is with two buttons. 我有两种DIV,一种是单按钮,另一种是两个按钮。
Is it possible to always vertical align them, either single or two buttons? 是否可以始终将它们垂直对齐(单个或两个按钮)?
Here's my link http://codepen.io/w3nta1/pen/wGxOzO 这是我的链接http://codepen.io/w3nta1/pen/wGxOzO
Here my JSfiddle which can help you. 在这里,我的JSfiddle可以为您提供帮助。
<ul>
<li>
<div class="imageBox">
<div class="imageActions">
<a href="#"><div class="box">link1</div></a>
</div>
</div>
</li>
<li>
<div class="imageBox">
<div class="imageActions">
<a href="#"><div class="box">link1</div></a>
<a href="#"><div class="box">link2</div></a>
</div>
</div>
</li>
</ul>
ul { list-style: none; }
li { width : 200px; }
.imageBox {display: table;height:120px;width:120px}
.imageActions {display:table-cell;height:120px;vertical-align:middle}
.imageBox { with:196px; height:100px; position:relative; background:#000; overflow: hidden; margin-bottom:2px; }
.imageBox .box { margin: 5px auto; padding: 5px; border:solid 1px #6f94e1; background-color:#456fd3; color:#FFF; width:100px; font-size:13px; text-align:center; }
.imageBox .imageActions { width:100%; height:100%; background:rgba(0,0,0,0.5); opacity: 0;}
.imageBox:hover .imageActions { opacity: 1; }
Here I have updated the height and width of .imageBox
在这里,我更新了
.imageBox
的高度和宽度
Weave: http://kodeweave.sourceforge.net/editor/#9711efdfbb1bae01637fbd39d75ce11a 编织: http : //kodeweave.sourceforge.net/editor/#9711efdfbb1bae01637fbd39d75ce11a
This is an easy fix. 这是一个简单的修复。
Set .imageBox
to have a display: table;
设置
.imageBox
以display: table;
Then set .imageActions
to have a display: table-cell;
然后将
.imageActions
设置为display: table-cell;
Because .imageActions
is displayed as a table-cell
now you can use vertical-align: middle;
由于
.imageActions
现在显示为table-cell
您可以使用vertical-align: middle;
to center your anchors vertically in the div. 在div中垂直放置锚点。
ul { list-style: none; } li { width: 200px; } .imageBox { display: table; width: 196px; height: 100px; position: relative; background: #000; overflow: hidden; margin-bottom: 2px; } .imageBox .box { margin: 5px auto; padding: 5px; border: solid 1px #6f94e1; background-color: #456fd3; color: #FFF; width: 100px; font-size: 13px; text-align: center; } .imageBox .imageActions { border-top-color: #000; background: rgba(0, 0, 0, 0.5); display: none; } .imageBox:hover .imageActions { display: table-cell; vertical-align: middle; }
<ul> <li> <div class="imageBox"> <div class="imageActions"> <a href="#"> <div class="box">link1</div> </a> </div> </div> </li> <li> <div class="imageBox"> <div class="imageActions"> <a href="#"> <div class="box">link1</div> </a> <a href="#"> <div class="box">link2</div> </a> </div> </div> </li> </ul>
I'm on a tablet which is why I'm using kodeWeave and thus why I saved the weave utilizing Jade and Stylus preprocessors. 我在平板电脑上,这就是为什么我使用kodeWeave的原因,因此为什么我使用Jade和Stylus预处理程序保存了编织。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.