Question

我有一堆“条”图像，所有图像都加起来一个图像。现在我需要将完成的图像边框化并将该框放在html页面的中间。

无论我尝试什么，我似乎无法将包含多个<div>标记的<img>居中。我正在寻找一个尽可能少的文本的纯CSS解决方案（因为我需要创建一个生成此页面的bash脚本）。

谢谢，米兰

编辑：

显然我需要提供代码，尽管它非常简单：

<html><head>
<style>div{font-size:0px; border: 5px solid red; display:inline-block;}</style>
</head><body>
<img ...><img ...><img ...><img ...> 
</body></html>

Answer 1

div{
    width: 50%;
    margin: 0 auto;
}

或者，如果您只想让所有内容都居中，请在身体上使用text-align: center;。

Answer 2

<div style="text-align:center">
  <div>This is the text to be centered</div>
</div>

要水平居中，您可以使用css中的margin: auto;属性

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 100%;}

Answer 3

我制作了一个CodePen，我认为它将解决这个问题。基本上你会想要使用

style="text-align:center"

在容器div上

http://cdpn.io/IhLBK

CSS - 中心div在页面上

3 个答案: