该网站的首次使用者。我有垂直居中图像的问题。我在网上搜索了不同的答案,但找不到任何答案。我尝试过使用vertical-align:middle;但它不起作用。它水平居中,但不垂直居中。
继承图像的div(这是幻灯片)。提前谢谢!
<div id="photo">
<img src="lax.jpg" name="slide" width="70%" height="70%">
<script type="text/javascript">
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
</script>
</div>
和css
#photo{
position:absolute;
top:15%;
height:80%;
width: 70%;
left:20%;
background:#3377ff;
overflow:hidden;
}
img{
vertical-align:middle;
display: table-cell;
margin-left: auto;
margin-right: auto;
}
答案 0 :(得分:0)
尝试删除这个
img{
vertical-align:middle;
display: table-cell;
margin-left: auto;
margin-right: auto;
}
并在div中添加内容
#photo{
position:absolute;
top:15%;
height:80%;
width: 70%;
left:20%;
background:#3377ff;
overflow:hidden;
vertical-align:middle;
display: table-cell;
margin-left: auto;
margin-right: auto;
}