图片垂直居中的外部影响

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <style>
        div img {}
        .wrap span {display: inline-block;border:1px solid red;text-align: center;}
    </style>
</head>
<body>
   <div class = "wrap" style = "width:1000px;height:200px;border:1px solid red;display:table-cell;vertical-align:middle;text-align:center;min-width:800px;margin:0 auto;">
       
            <span><img src = "images/children3.jpg">
            <img src = "images/children3.jpg">
            <img src = "images/children3.jpg"></span>
          
   </div>
</body>
</html>

以上代码效果图如下：
图片描述

这里有个问题就是为什么我给外部div：margin:0 auto;他却无法在页面中居中？

还有个问题是我给外部div加上float这个属性，整个就变成了如下截图：

**图片无法垂直居中了**

以上就是我所要提的问题，希望各位路过的官人帮忙解答，谢谢

阅读 2.1k

题主建议你这种问题，用runjs或者jsfiddle，然后贴出来，大家方便看。

我发现table-cell去掉的话，就可以居中了，但是就没了垂直居中，大概是margin: 0 auto;适合于block吧。所以水平居中没生效，你加float:right;他就往右去了，这样正常吧。

我大概想到你这里可以改成把你垂直居中的那套独立出一个div来，像这样：

<div class = "wrap" style = "width:1000px;height:200px;border:1px solid red;margin:0 auto;text-align:center;">
    <div style="display:table-cell;vertical-align:middle;text-align:center;width:1000px; height:200px;">
        
    
       
            <span><img src = "https://sf-sponsor.b0.upaiyun.com/a03682c34bc8eded4283aae4c9872540.png">
            <img src = "https://sf-sponsor.b0.upaiyun.com/a03682c34bc8eded4283aae4c9872540.png">
            <img src = "https://sf-sponsor.b0.upaiyun.com/a03682c34bc8eded4283aae4c9872540.png"></span>
          </div>
   </div>

 div img {width:50px;}
.wrap span {display: inline-block;border:1px solid red;text-align: center;}

就是用一个父元素div做水平居中，里面再套垂直居中的div，然后放图片。（这里图片我随便加的，方便看）

不过应该有其他方案吧~

图片垂直居中的外部影响

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

css如何设置纵向滚动条的高度？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？