I have the following code which creates an 'img-cell'div which is empty with a height and background-image. And a 'text-cell' div underneath. (both 100% width) (php code removed, it doesn't affect the layout)
我有以下代码创建一个'img-cell'div,它是空的,有高度和背景图像。下面是一个'文本单元'div。 (均为100%宽度)(删除php代码,不影响布局)
HTML
<article>
<div class="img-cell">
</div>
<div class="text-cell">
<div class="extra-css" >
<h1>Title</h1>
<h3>Category</h3>
</div>
</div>
</article>
CSS
article {
position: relative;
margin: 0;
padding: 0;
}
.img-cell {
position: relative;
height: 375px;
width: auto;
padding: 0;
margin: 0;
border-top: 1px solid #000;
background-size: cover;
background-repeat: no-repeat;
}
.text-cell {
position: absolute;
z-index: 10;
padding: 15px 0;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
display:table;
}
this puts the 'text-cell' div vertically centred over 'image-cell' div. It only works in Safari, but not in Firefox or the other browsers. It has to do with display:table. I don't want to use tables but I can't figure out how how to vertically center 'text-cell'
这将'text-cell'div垂直居中于'image-cell'div上。它仅适用于Safari,但不适用于Firefox或其他浏览器。它与display:table有关。我不想使用表但我无法弄清楚如何垂直居中'text-cell'
EDIT - I have the 'text-cell' position:relative on mobile size screens so it goes below the 'img-cell' div
编辑 - 我有'文本单元'位置:相对于移动大小的屏幕,所以它低于'img-cell'div
2 个解决方案
#1
An other approach to try to solve your issue, same HTML but slightly different CSS:
尝试解决您的问题的另一种方法,相同的HTML但略有不同的CSS:
article {
position: relative;
}
.img-cell {
height: 375px;
}
.text-cell {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}
#2
You can try this:
你可以试试这个:
Will center vertical .text-cell
将中心垂直.text-cell
To center vertical the <H1>
and <h3>
, remove the padding
要使
和
垂直居中,请删除填充
HTML
<article>
<div class="img-cell">
<div class="text-cell">
<div class="extra-css" >
<h1>Title</h1>
<h3>Category</h3>
</div>
</div>
</div>
</article>
CSS
article {
position: relative;
margin: 0;
padding: 0;
}
.img-cell {
position: relative;
height: 375px;
width: auto;
padding: 0;
margin: 0;
border-top: 1px solid #000;
background-size: cover;
background-repeat: no-repeat;
}
.text-cell {
position: absolute;
z-index: 10;
padding: 15px 0;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
display:table;
top: 50%; //add this
display: inline-block; //add this
transform: translateY(-50%); //add this
background: #f1f1f1;
display: inline-block; //add this
vertical-align: middle; //add this
}
#1
An other approach to try to solve your issue, same HTML but slightly different CSS:
尝试解决您的问题的另一种方法,相同的HTML但略有不同的CSS:
article {
position: relative;
}
.img-cell {
height: 375px;
}
.text-cell {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}
#2
You can try this:
你可以试试这个:
Will center vertical .text-cell
将中心垂直.text-cell
To center vertical the <H1>
and <h3>
, remove the padding
要使
和
垂直居中,请删除填充
HTML
<article>
<div class="img-cell">
<div class="text-cell">
<div class="extra-css" >
<h1>Title</h1>
<h3>Category</h3>
</div>
</div>
</div>
</article>
CSS
article {
position: relative;
margin: 0;
padding: 0;
}
.img-cell {
position: relative;
height: 375px;
width: auto;
padding: 0;
margin: 0;
border-top: 1px solid #000;
background-size: cover;
background-repeat: no-repeat;
}
.text-cell {
position: absolute;
z-index: 10;
padding: 15px 0;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
display:table;
top: 50%; //add this
display: inline-block; //add this
transform: translateY(-50%); //add this
background: #f1f1f1;
display: inline-block; //add this
vertical-align: middle; //add this
}