如何在页面上水平居中放置 div（带有子 div）？

Posted 2023-03-29

【中文标题】如何在页面上水平居中放置 div（带有子 div）？

【英文标题】：How do you position a div (with child divs) horizontally centered on the page?

【发布时间】：2017-09-21 12:50:40

【问题描述】：

我想将一个 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>

【问题讨论】：

sn-p 不包含 html

要居中#allgauges div，您必须将其宽度设置为 px 或 %

设置宽度就像一个魅力。谢谢！

【参考方案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>