2

我无法在响应式图像中居中文本。我试过了vertical-align:middle。它垂直居中文本，但它在图像旁边，而不是在图像前面。

如您所见，我的图像是响应式的，因此我希望文本与图像一起移动。预先感谢您的帮助。

HTML：

 <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>

CSS：

 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);

}

4

3 回答 3

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>
于 2013-06-10T13:18:08.450 回答
0

我已经添加了

<span id="imgtxt">ASAP ROCKY - Jack New City</span>

及其CSS：

#imgtxt{
    z-index:10;
    position:absolute;
    color:white;
    left:20%;
    top:35%;
}

你也可以查看这个DEMO

于 2013-06-10T13:23:49.947 回答
0

您可以通过 CSS 使元素居中（如果它们没有通过float或定位从流中取出），方法是在元素的左侧和右侧absolute设置相等。margin

margin-left: 50%;
margin-right: 50%;
于 2013-06-10T13:08:00.503 回答