Question

我必须为学校建立一个网站，我想知道如何将这些div与中心对齐，以便它们之间的距离保持不变，无论你做什么，但当你放大浏览器窗口时作为一个群体保持在页面底部的中心位置。任何人都可以帮助我吗？

<div id="thing 1">
   <div style="position: absolute; bottom: 0px; left: 220px; width: 300px;">
   <img border="0" src="thing 1" alt="awesome thing 1" width="296,4" height="464,5">
</div>

<div id="thing 2">
   <div style="position: absolute; bottom: 0px; left: 470px; width: 300px;">
   <img border="0" src="thing 2" alt="awesome thing 2" width="228" height="357,3">
</div> 

<div id="thing 3">
   <div style="position: absolute; bottom: 0px; left: 700px; width: 300px;">
   <img border="0" src="thing 3" alt="awesome thing 3" width="90" height="400">
</div> 

<div id="thing 4">
   <div style="position: absolute; bottom: 0px; left: 820px; width: 300px;">
   <img border="0" src="thing 4" alt="awesome thing 4" width="200" height="380">
</div>

Answer 1

.mydivs {
  display: inline-block;
  margin: auto;
  width: 50px; /*some fixed width*/
}

/* centered equidistantly */

Answer 2

您需要做的就是将图片保留在一个div中并为其添加text-align: center样式：

<强> HTML：

<div id="thing_1">
    <img border="0" src="thing 1" alt="awesome thing 1" width="296,4" height="464,5">
    <img border="0" src="thing 2" alt="awesome thing 2" width="228" height="357,3">
    <img border="0" src="thing 3" alt="awesome thing 3" width="90" height="400">
    <img border="0" src="thing 4" alt="awesome thing 4" width="200" height="380">
</div>

<强> CSS：

#thing_1 {
    text-align: center;
}

Example

如果更改分辨率，如何将一组保持居中的div居中

2 个答案: