5 个框在页面中心未正确居中答案

【问题标题】：5 boxes not centering correctly in the center of the page5 个框在页面中心未正确居中
【发布时间】：2017-03-31 18:27:35
【问题描述】：

我对编程完全陌生。我已经对齐了 5 个盒装 horizontally ，但我想要的是使盒子居中。这些盒子也应该响应它们现在的状态。我正在搜索并搜索如何使 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>

【问题讨论】：

标签： html css centering

【解决方案1】：

我认为最简单的方法是从内部 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>

【讨论】：

【解决方案2】：

将max-width 或width 添加到父容器。然后以margin: 0 auto 居中。当然可以根据需要设置父元素的width。我只是以520px为例。

W3Schools 这么说：

居中对齐元素要水平居中块元素（如），请使用 margin: auto;

设置元素的宽度会防止它被拉伸到其容器的边缘。

然后元素将占据指定的宽度，剩下的空间将在两个边距之间平均分配：

见下面的例子。

.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>

【讨论】：

在一个小窗口中它工作正常，但是当您将浏览器设置为 100% 时我遇到了同样的问题。这些盒子在其他盒子下面。
无论你做什么都会遇到这个问题。让他们反应灵敏。 inline-block, text-align: center当窗口变小时它们都会坏掉

【解决方案3】：

为outside添加text-aligncenter

.outside{
  text-align:center;
}

删除float并添加displayinline-blocksquare

.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; 

}

【讨论】：

【解决方案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>

【讨论】：