html - 居中对齐 3 个内联的 div 标签

Question

我在一个父 div 中有 3 个 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: inline-block;像这样:

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

然后，如果您还想将它们垂直居中，您可以添加 vertical-align: center;给你的 child div。