使用自动高度和最大高度垂直居中图像
Vertically centering an image with auto height and max-height
我正在尝试垂直居中使用自动高度的图像,因为我想填充水平宽度 (100%)。它的容器定义了最大高度值和隐藏的 overflow-y。
HTML:
<figure>
<img src="http://lorempixel.com/500/500/" alt="Imagem" />
<figcaption>
<p>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</p>
</figcaption>
</figure>
CSS:
figure {
padding: 5px 0;
max-height: 300px;
overflow-y: hidden;
position: relative;
}
figure>img {
width: 100%;
height: auto;
position: relative;
top: -50%;
}
figcaption {
bottom: 0;
position: absolute;
background-color: #1e1e1e;
color: white;
padding: 5px 10px;
font-size: 14px;
text-align: center;
width: 100%;
}
试试这个:
figure > img {
position: relative;
margin-top:50%;
transform:translateY(-50%);
}
您可以使用这个技巧:使用一些伪 类 来居中任何未知的内容大小:
https://css-tricks.com/centering-in-the-unknown/
诀窍是将之前的内容设置为您需要的完整大小。这将导致内容始终居中。
演示:
http://codepen.io/chriscoyier/pen/gsodI
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
我正在尝试垂直居中使用自动高度的图像,因为我想填充水平宽度 (100%)。它的容器定义了最大高度值和隐藏的 overflow-y。
HTML:
<figure>
<img src="http://lorempixel.com/500/500/" alt="Imagem" />
<figcaption>
<p>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</p>
</figcaption>
</figure>
CSS:
figure {
padding: 5px 0;
max-height: 300px;
overflow-y: hidden;
position: relative;
}
figure>img {
width: 100%;
height: auto;
position: relative;
top: -50%;
}
figcaption {
bottom: 0;
position: absolute;
background-color: #1e1e1e;
color: white;
padding: 5px 10px;
font-size: 14px;
text-align: center;
width: 100%;
}
试试这个:
figure > img {
position: relative;
margin-top:50%;
transform:translateY(-50%);
}
您可以使用这个技巧:使用一些伪 类 来居中任何未知的内容大小:
https://css-tricks.com/centering-in-the-unknown/
诀窍是将之前的内容设置为您需要的完整大小。这将导致内容始终居中。
演示: http://codepen.io/chriscoyier/pen/gsodI
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
/* This parent can be any width and height */
.block {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}