Question

我试图找到答案好几天了。由于某种原因，div在左边捆绑，不听理由。我犯了什么错误？

.vlak{
width:220px;
height: 300px;
background-color:#FFF;
float:left;
margin-left:auto;
margin-right:auto;
position:relative;
margin-top: -50px;
}

.vlak img{
width:200px;
height: 125px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;

}

#vlakken{
width: 998px;
height:275px;
background-color: f2f2f2;   
margin-left:auto;
margin-right:auto;
position:relative;
z-index: 100;
}

https://jsfiddle.net/vxxyo9jb/

我正在尝试将.vlak对齐在中心

Answer 1

你是左边的浮动元素：

.vlak{
...
float:left;
...
}

margin: auto不适用于浮动元素。这是2015你应该使用flexbox中心项目:)，摆脱float: left属性并添加：

#vlakken{
    width: 998px;
    height:275px;
    background-color: f2f2f2;   
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-index: 100;
    border: green 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

updated fiddle

Answer 2

这很简单，请按照以下两个步骤进行操作

包含所有图片的div，在CSS中为div提供一些“height”和“Overflow：hidden”。
现在只需使用“float：left”并将“padding”应用于CSS中的图片div。

希望这会帮助你。

如果保证金：auto不起作用，如何让我的div在中心对齐？

2 个答案: