我无法在响应式图像中居中文本。我试过了vertical-align:middle
。它垂直居中于文本中心,但它位于图像旁边,而不是图像前面。
正如您所看到的,我的图像具有响应性,因此我希望文本随图像一起移动。提前感谢您的帮助。
<div class="image">
<img src="http://static.inqmind.co/content/2013/05/aap-mob-always-strive-and-prosper/feature.jpg" class="ri" id="hv" />
ASAP ROCKY - Jack New City</div>
</div>
img.ri
{
position: relative;
max-width: 75%;
display: inline-block;
vertical-align: middle;
}
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}
img#hv {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img#hv:hover {
filter: none;
-webkit-filter: grayscale(0);
}
答案 0 :(得分:7)
这是你可以做到的一种方式:http://jsfiddle.net/yJ8wh/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.image {position: relative; text-align: center;}
.image span {position: absolute; line-height: 20px; display: block; top: 50%; margin-top: -10px; width: 100%; color: white;}
img.ri
{
position: relative;
max-width: 75%;
display: inline-block;
vertical-align: middle;
}
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}
img#hv {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img#hv:hover {
filter: none;
-webkit-filter: grayscale(0);}
</style>
</head>
<body>
<div class="image">
<img src="http://static.inqmind.co/content/2013/05/aap-mob-always-strive-and-prosper/feature.jpg" class="ri" id="hv">
<span>ASAP ROCKY - Jack New City</span>
</div>
</body>
</html>
如果你想让所有东西保持对齐,这里有另一个选项:http://jsfiddle.net/DqCuA/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.image {position: relative; text-align: center;}
.image b {display: block;position: absolute;line-height: 20px; top: 50%; margin-top: -10px; width: 100%; color: white; font-weight: normal;}
img.ri
{
position: relative;
max-width: 75%;
vertical-align: middle;
}
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}
img#hv {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img#hv:hover {
filter: none;
-webkit-filter: grayscale(0);}
</style>
</head>
<body>
<span class="image">
<img src="http://static.inqmind.co/content/2013/05/aap-mob-always-strive-and-prosper/feature.jpg" class="ri" id="hv">
<b>ASAP ROCKY - Jack New City</b>
</span>
</body>
</html>
答案 1 :(得分:0)
您可以通过CSS(通过float
或absolute
定位)将元素置于中心位置,方法是在左侧和右侧设置相等的margin
它的一面。
margin-left: 50%;
margin-right: 50%;
答案 2 :(得分:0)
我添加了
<span id="imgtxt">ASAP ROCKY - Jack New City</span>
及其css:
#imgtxt{
z-index:10;
position:absolute;
color:white;
left:20%;
top:35%;
}
您也可以查看此DEMO