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;给你的孩子。

Answer 2

使用名为flexbox的CSS中的新功能，可以更好地实现此目的。使用它，这是你的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%;
}

Demo

Answer 4

指定容器的宽度值，否则将假设100％的屏幕宽度。

Answer 5

你走了： Fiddle Here

div > div {
    width:100px;
    height:100px;
    border-style:solid;
    border-width:1px;
    display: inline-block;
}

Answer 6

通过CSS对齐标记元素有不同的方法，但使用表格显示是最简单的一种IMO，它也适用于大多数浏览器。

See the fiddle

希望它有所帮助。干杯！

Answer 7

很难说不看div是如何显示的，但是你的描述我的第一次尝试将是：

#div-1 { float: left; margin: 0 0 0 10%}
#div-2 { display: inline;}
#div-3 { float: right; margin: 0 10% 0 0}

使用10％来获得你想要的位置。

如果您的内容有响应，这将导致麻烦。可能必须与div-2一起工作。

中心对齐3个div标签内联

7 个答案: