Html 水平对齐div而不浮动

Horizontally align div without float

提问by Azincourt

I want to know if there exists an elegantway to horizontally align 3 divswithout usingfloatcss property.

我想知道是否有一种优雅的方法可以在divs不使用floatcss 属性的情况下水平对齐 3 。

HTML:

HTML：

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
</div>

I ask this question because the parent divhas not floatproperty and adding floatto children cause problems on page resizing.

我问这个问题是因为父级div没有float属性，并且添加float到子级会导致页面调整大小出现问题。

回答by potashin

You can use display:inline-blockor display:table-cellwith the inner content.

您可以使用display:inline-block或display:table-cell与内部内容一起使用。

• Flex layout(See also T J's answer):

• Flex 布局（另见TJ 的回答）：

#parent{ display:flex; justify-content: space-between; }

JSFiddle

JSFiddle

• Table layout:

• 表布局：

#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

JSFiddle

• Inline-block layout :

• 内联块布局：

#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

JSFiddle

回答by T J

Adding to notulysses's answer, If ancient browser support is not an issue, you can use css3 Flexible_boxes.

添加到notulysses的答案，如果古老的浏览器支持不是问题，您可以使用 css3 Flexible_boxes。

By applying display:flexthe child divs will be aligned horizontally (by default)

通过应用display:flex子 div 将水平对齐（默认情况下）

#parent{
 display:flex;
 justify-content:space-around;
}

more about flexbox @ CSSTricks

更多关于flexbox @ CSSTricks

This will avoid the white space issue with inline-blockelements

这将避免元素的空白问题inline-block

JSfiddle

JSfiddle

回答by Ankit Agrawal

#parent { 
    display: table; 
}

#first, #second, #third { 
    display: table-cell; 
}

回答by Praxis Ashelin

Instead of finding a workaround for floating, you could also use the following fix for your "resizing problems" (at least what I think it is caused by):

除了找到浮动的解决方法之外，您还可以使用以下修复程序来解决“调整大小问题”（至少我认为是由什么引起的）：

After using floats, you should always clear your floats. You can do this by adding an extra <div>with a class.

使用浮动后，您应该始终清除浮动。您可以通过添加一个额外<div>的类来做到这一点。

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
  <div class="clear"></div>
</div>

In CSS:

在 CSS 中：

.clear{
  clear: both;
}

回答by chandu

With the CSS below you can achieve your goal :

使用下面的 CSS，您可以实现您的目标：

#parent{
 width:140px;
    height:30px;
    border:1px solid #CCC; 
}
#first{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid red;
}
#second{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid green;
}
#third{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid blue;
}

Fiddle

小提琴

回答by Sid

Use the CSS style below :

使用下面的 CSS 样式：

#parent div{ display: inline-block; }

Working Fiddle

工作小提琴