[英]Responsive Vertical Alignment of text inside an absolutely positioned div
I'm creating a thumbnail image gallery. 我正在创建一个缩略图库。 I'm having it where you hover over the image and you see the title and description.
当您将鼠标悬停在图片上时,就会看到标题和说明。 I want the title and description centred inside the hover div.
我希望标题和描述集中在悬停div内。
Because I have positioned the hover div as absolute, I'm having trouble using the usual table methods to vertically align. 因为我将悬停div定位为绝对值,所以在使用常规表格方法垂直对齐时遇到了麻烦。 Whenever I resized the viewport, the text wouldn't be in the centre anymore.
每当我调整视口大小时,文本就不再位于中间。
Any help with this would be appreciated. 任何帮助,将不胜感激。
Here is the jsfiddle example: http://jsfiddle.net/Forresty/2snra4tL/1/ 这是jsfiddle示例: http : //jsfiddle.net/Forresty/2snra4tL/1/
Here is the code: 这是代码:
HTML: HTML:
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
CSS: CSS:
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}
I answered my own question. 我回答了我自己的问题。
The final code can be seen here: http://jsfiddle.net/Forresty/2snra4tL/4/ 最终的代码可以在这里看到: http : //jsfiddle.net/Forresty/2snra4tL/4/
I added another div as a table containing the div that contains the text. 我添加了另一个div作为包含包含文本的div的表。
Thanks again. 再次感谢。
HTML: HTML:
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
SCSS: SCSS:
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}
.center{
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.item_description{
display: table-cell;
vertical-align: middle;
p, h4{
margin: 0;
}
}
Here is how you align your text: 这是对齐文本的方式:
Horizontally: 水平:
.item_description p,
.item_description h4{
text-align:center;
}
Vertically: 垂直:
.item_description{
position: relative;
margin-top: 50%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.