在不使用位置的情况下将 div 居中

Posted 2023-03-06

【中文标题】在不使用位置的情况下将 div 居中

【英文标题】：center a div without using position

【发布时间】：2016-12-08 18:19:40

【问题描述】：

第二个 div 应该居中对齐，不使用位置，第一个和最后一个 div 有浮动

 <div class="abc">
    </div>
    <div class="def">
    </div>
    <div class="ghi">
    </div>

【问题讨论】：

.def float: left; 或更好的divfloat : left

一个plunker会帮助了解到目前为止已经完成的工作

这听起来像是一个 XY 问题。 真正的问题是什么？你怎么不能用position？让我们解决那个问题。

【参考方案1】：

如果您在 first 和 last 上使用浮点数。它不起作用，最后一个 div 填充下降。您可以为此使用 flex。

.container
  display: flex;

.container div
  flex: 1;

.abc
  text-align: left

.ghi
  text-align: right;

.def
  text-align: center;

<div class="container">
	<div class="abc">
   1st
	</div>
	<div class="def">
		second
	</div>
	<div class="ghi">
		third
	</div>
</div>

Demo这里

【讨论】：

请注意，中间的 div 不是实际上居中的，除非左/右 div 大小相同。