Question

该网站的首次使用者。我有垂直居中图像的问题。我在网上搜索了不同的答案，但找不到任何答案。我尝试过使用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;
}

Answer 1

尝试删除这个

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

使用vertical-align定居图像：CSS中间不起作用

1 个答案: