ask2

图片垂直居中的外部影响 财富值12

2016-10-13 11:23发布

站内问答 /
4716 7 3 
<!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这个属性，整个就变成了如下截图：

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

友情提示: 此问题已得到解决，问题已经关闭,关闭后问题禁止继续编辑，回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
7条回答
bobomao - 这个人很懒，什么都没留下
1楼-- · 2016-10-13 11:44

问题一

王鹏飞 - 这个人很懒，什么都没留下
2楼-- · 2016-10-13 11:34

问题二

bbjbbj - 这个人很懒，什么都没留下
3楼-- · 2016-10-13 11:34

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

王鹏飞 - 这个人很懒，什么都没留下
4楼-- · 2016-10-13 11:44

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

忙碌的小伟 - 这个人很懒，什么都没留下
5楼-- · 2016-10-13 11:44

不过应该有其他方案吧~

旅易 - 我们的故事并不算美丽，却如此难以忘记。
6楼-- · 2016-10-13 11:35

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

王鹏飞 - 这个人很懒，什么都没留下
7楼-- · 2016-10-13 11:47

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

一周热门 更多>