html - 如何在页面上水平居中放置一个 div(带有子 div)？

Question

我想将一个 div 在页面上水平居中(该 div 包含四个类似径向刻度盘的仪表，它们需要彼此相邻，而不是一行接一行)。我当前的 CSS(下方)将仪表彼此相邻显示，因此 float 属性似乎可以正常工作，但我为父 div (allgauges) 设置的边距属性似乎无效。当我尝试将它与页面中心对齐时，我在“allgauges”中有几个 div 的事实会有所不同吗？感谢您的帮助。

<!-- Embedded style sheet to change the margin spacing between the gauges -->
    <style>
     
     
    #one, #two, #three, #four
    {
	float: left;
	}
	 
    #allgauges
    {
		margin: 0 auto;
	}
        
    </style>

Answer 1

这个问题已经回答过多次了。这是解决方案:

.one,.two, .three,.four
{
  display:inline-block;
  vertical-align:middle;
  width:25%;
  text-align:center; /* This is not necessary.*/
  font-size:13px;
}
	 
.allgauges
{
   font-size:0;
}

<div class="allgauges">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>