中心与3个div标签对齐

Question

我有3个div标签在一个父div里面。我想把中心的每一样东西都对准。

div-1 - Left Arrow link to prev image set.
div-2 - It will have multiple images.
div-3 - Right Arrow link to next image set.

我所做的工作如下：

#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }

有了这样的图片，就可以按要求在中心显示。但是左箭头和右箭头显示在屏幕的最左边和最右边。

除了图像之外，如何显示它们呢？

Answer 1

我会使用display:内联块；就像这样：

#container{ 
    text-align: center;
}
#div-1, #div-2, #div-3{
    display: inline-block; 
}

然后，如果您想对它们进行垂直居中，您可以将垂直对齐: center；添加到您的子div中。

Answer 2

有一种更好的方法可以利用CSS中的一个名为flexbox的新特性来实现这一点。使用它，下面是CSS的样子：

#container { 
    display: flex; 
    flex-direction: horizontal; 
}
#div-1 {
    flex: 1; order: 0; 
}
#div-2 {
    flex: 1; order: 1; 
}
#div-3 { 
    flex: 1; order: 2; 
}

祝好运!

Answer 3

只需使用边距设置容器div的位置即可。

HTML :

<div id="container">
    <div id="leftArrow"><</div>
    <div id="images">Images</div>
    <div id="rightArrow">></div>
</div>

CSS :

//margin : top right bottom left;

div{
    display : inline;
}

#container{ 
    margin : 0px 0px 0px 30%;
}

演示