5 个框未在页面中央正确居中

Question

我对编程完全陌生。我已经对齐 5 个盒装水平，但我想要的是将盒子居中。这些盒子也应该响应它们现在的状态。我正在搜索和搜索如何将 div 居中，但结果我得到了 margin: 0 auto; width: 800px;。当我将浏览器调整为 100% 时，第 5 个框位于其他框下方。

.square { 
 float:left;
 width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
 position: relative;
 border: 0.5px solid red;
 text-align: center; 
}

.square span {
 font-size: 3vw;
}

 <div class="outside">
  <div class="square">
   <span>2.1</span>
  </div>
  <div class="square">
   <span>2.3</span>
  </div>
  <div class="square">
   <span>2.5</span>
  </div>
  <div class="square">
   <span>2.6</span>
  </div>
  <div class="square">
   <span>2.7</span>
  </div>
 </div>

Answer 1

向父容器添加一个max-width或width。然后用 margin: 0 auto 居中。当然根据需要设置父元素的width。我只是把它设为520px作为例子。

W3Schools 是这样说的：

Center Align Elements To horizontally center a block element (like ), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins:

参见下面的示例。

.outside {
  max-width: 520px;
  margin: 0 auto;
}

.square { 
 float:left;
 width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
 position: relative;
 border: 0.5px solid red;
 text-align: center; 
}

.square span {
 font-size: 3vw;
}

<div class="outside">
  <div class="square">
   <span>2.1</span>
  </div>
  <div class="square">
   <span>2.3</span>
  </div>
  <div class="square">
   <span>2.5</span>
  </div>
  <div class="square">
   <span>2.6</span>
  </div>
  <div class="square">
   <span>2.7</span>
  </div>
 </div>

Answer 2

我认为最简单的方法是从内部 div 中删除浮动，并将它们显示为内联块。外面会有自动边距和居中文本对齐，如下所示：

.outside {
  border: 1px solid blue;
  text-align: center;
  margin: 0 auto;
}

.square { 
 display: inline-block;
 width: 12.5vw;
  height: 12.5vw;
  margin-left: 10px;
  margin-right: 10px;
 position: relative;
 border: 0.5px solid red;
 text-align: center;
}

.square span {
 font-size: 3vw;
}

<div class="outside">
  <div class="square">
    <span>2.1</span>
  </div>
  <div class="square">
    <span>2.3</span>
  </div>
  <div class="square">
    <span>2.5</span>
  </div>
  <div class="square">
    <span>2.6</span>
  </div>
  <div class="square">
    <span>2.7</span>
  </div>
</div>

Answer 3

为 outside

添加 text-align center

.outside{
  text-align:center;
}

删除 float 并添加 display inline-block square

.square{
    display:inline-block;
    width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    border: 0.5px solid red;
    text-align: center; 

}

Answer 4

我不完全理解您的要求，但请尝试以下操作。它将使您的框居中，并且在降低分辨率时也不允许它们换行到下一行。

将您的 css 替换为：

.square { 
    float: left;
    width: 19%;
    height: 12.5vw;
    margin-right: 1%;
    position: relative;
    border: 0.5px solid red;
    text-align: center;
    box-sizing: border-box; 
}

.square span {
    font-size: 3vw;
}

.outside {
    width: 100%;
}

.inside {
    width: 69%;
    margin: 0 auto;
    overflow: auto;
}

Html 与：

<div class="outside">
  <div class="inside">
        <div class="square">
            <span>2.1</span>
        </div>
        <div class="square">
            <span>2.3</span>
        </div>
        <div class="square">
            <span>2.5</span>
        </div>
        <div class="square">
            <span>2.6</span>
        </div>
        <div class="square">
            <span>2.7</span>
        </div>
   </div>
</div>

5 个框未在页面中央正确居中

5 boxes not centering correctly in the center of the page

html

css

centering