时间戳

首页 > 解决方案 > 为什么这些框不能垂直对齐？

html - 为什么这些框不能垂直对齐？

问题描述

我想不通，它应该把盒子放在它的容器中间，但我不能让它们移动。

这个想法是将包装器内部居中并将它们水平放置在中间，而无需使用边距或填充物并使用垂直对齐。

#wrapper {
  width: 1000px;
  height: 1000px;
}

#container {
  width: 900px;
  height: 900px;
  text-align: center;
  display: inline-block;
  background-color: lightblue;
}

.box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  background-color: lightgreen;
  border: 1px solid grey;
  margin: 10px;
}
<div id="wrapper">
  <div id="container">
    <div class="box">BOXES</div>
    <div class="box">BOXES</div>
    <div class="box">BOXES</div>
  </div>
</div>

标签： htmlcss

解决方案

我认为您正在寻找 flexbox。

我已经调整了你的 jsfiddle 以适应 https://jsfiddle.net/ke4w58ra/

以下代码是我对您的#content 元素所做的更改。

display: flex;
justify-content: center;
align-items: center;
gap: 5px;

本质上，将元素设置为水平（对齐项目）和垂直（对齐内容）显示在中心。有 5px 的间隙将盒子隔开。

有关更多信息，请查看此处：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

下面是 JSFiddle 的集成形式

#container{
    width: 100vw;
    height: 100vh;
    
    text-align: center;
    display: inline-block;
    background-color: lightblue;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5px;
}

.box{
    width: 200px;
    height: 200px;
    
    margin: 0 auto;
    
    background-color: lightgreen;
    border: 1px solid grey;
    margin: 10px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
  margin: 0px;
}
<body>
    <div id="container">
        <div class="box">BOXES</div>
        <div class="box">BOXES</div>
        <div class="box">BOXES</div>
    </div>
</body>

推荐阅读