我有图片和文字的列表。我希望看到图像上的文字。
li{
float:right
}
.textoverlay {
margin: 50px 25px 0 0;
position: absolute;
z-index: 22;
}

<li>
<div class="textoverlay">
<a href=""><h1>Text</h1></a>
<p>Lorem ipsum dolor sit amet, co</p>
</div>
<img width="667" height="500" src="..." >
</li>
&#13;
但是可以将<div class="textoverlay">
对齐到图像的中间吗?
答案 0 :(得分:1)
您可以使用translate
transform:
ul{
list-style:none;
}
ul li{
position: relative;
float:right;
width:330px;
}
.textoverlay {
position: absolute;
z-index: 22;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkkit-transform:translate(-50%,-50%);
text-align:center;
width: 100%;
}
&#13;
<ul>
<li>
<div class="textoverlay">
<a href=""><h1>Text</h1></a>
<p>Lorem ipsum dolor sit amet, co</p>
</div>
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" >
</li>
</ul>
&#13;
答案 1 :(得分:1)
跟随css将使元素垂直中间对齐:
.parent {
position: relative;
}
.child {
transform: translateY(-50%);
position: absolute;
top: 50%;
}
然后跟随css将使一个元素水平和垂直中间对齐:
.parent {
position: relative;
}
.child {
transform: translateY(-50%);
position: absolute;
text-align: center;
right: 0;
top: 50%;
left: 0;
}
.list {
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
li{
position: relative;
float:right
}
.textoverlay {
transform: translateY(-50%);
text-align: center;
position: absolute;
z-index: 10;
right: 0;
top: 50%;
left: 0;
}
&#13;
<ul class="list">
<li>
<div class="textoverlay">
<a href=""><h1>Text</h1></a>
<p>Lorem ipsum dolor sit amet, co</p>
</div>
<img width="350" height="150" src="http://placehold.it/350x150" >
</li>
</ul>
&#13;
答案 2 :(得分:0)
试试这个css:
.textoverlay {
margin: 50px 25px 0 0;
position: absolute;
z-index: 22;
left:40%
}
答案 3 :(得分:0)
<强>段强> 复制此
li{
float:right;
position:relative;
}
.textoverlay {
position: absolute;
z-index: 22;
left:150px;
top:50px;
}
<li>
<div class="textoverlay">
<a href=""><h1>Text</h1></a>
<p>Lorem ipsum dolor sit amet, co</p>
</div>
<img width="333" height="250" src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" >
</li>
更改textoverlay位置会更改css中top和left att的值 希望这可以帮助 谢谢!