垂直对齐图像上的文本
vertical align text on image
我知道这个问题已经被问了很多,但我一直无法在答案中找到解决方案。我试图将文本置于图像的中心,但我在垂直对齐方面遇到了一些问题。这是我的代码:
<div class="col-sm-12 col-md-12 col-lg-12 main_category_container">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="wrap">
<h3 class="sub_category_title"><a href="some link">Centered text</a></h3>
<a href="some link"><img src="some image"></a>
</div>
</div>
</div>
和
.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}
h3.sub_category_title {
vertical-align: middle;
}
现在文本在图像上方水平居中,但我不知道如何将它垂直对齐在图像中间。
提前致谢!
通常,如果您试图将一个元素与另一个元素重叠,您最终会使用 position: absolute
或 position: relative
- 否则,内容将自然地排列成一个块流。
您可以尝试这样的操作:
.image-wrapper {
position: relative;
text-align: center;
width: 300px; /* change or remove as needed */
margin: auto;
}
.image-link { display: block; }
.image-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
/* The rest of this is just for this demo,
you can change it for your situation. */
font-weight: bold;
color: white;
font-family: sans-serif;
background: rgba(0, 0, 0, 0.5);
}
<div class="image-wrapper">
<a class="image-link" href="#">
<img class="image" src="http://loremflickr.com/300/200" alt="kitten!">
<h3 class="image-text">A Centered Label</h3>
</a>
</div>
我知道这个问题已经被问了很多,但我一直无法在答案中找到解决方案。我试图将文本置于图像的中心,但我在垂直对齐方面遇到了一些问题。这是我的代码:
<div class="col-sm-12 col-md-12 col-lg-12 main_category_container">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="wrap">
<h3 class="sub_category_title"><a href="some link">Centered text</a></h3>
<a href="some link"><img src="some image"></a>
</div>
</div>
</div>
和
.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}
h3.sub_category_title {
vertical-align: middle;
}
现在文本在图像上方水平居中,但我不知道如何将它垂直对齐在图像中间。
提前致谢!
通常,如果您试图将一个元素与另一个元素重叠,您最终会使用 position: absolute
或 position: relative
- 否则,内容将自然地排列成一个块流。
您可以尝试这样的操作:
.image-wrapper {
position: relative;
text-align: center;
width: 300px; /* change or remove as needed */
margin: auto;
}
.image-link { display: block; }
.image-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
/* The rest of this is just for this demo,
you can change it for your situation. */
font-weight: bold;
color: white;
font-family: sans-serif;
background: rgba(0, 0, 0, 0.5);
}
<div class="image-wrapper">
<a class="image-link" href="#">
<img class="image" src="http://loremflickr.com/300/200" alt="kitten!">
<h3 class="image-text">A Centered Label</h3>
</a>
</div>