将浮动定义为css中的中心答案

【问题标题】：define float as center in css将浮动定义为css中的中心
【发布时间】：2012-06-06 00:21:40
【问题描述】：

如何在 css 中将定义浮点数定义为中心？实际上我需要左右之间的布局，并且我尝试了“文本对齐”，但它不起作用并且“浮动”属性正常工作。

谢谢

【问题讨论】：

yopefonic 和 dcaunt 的技术都是完全有效的（尽管有 dcaunt 的评论）。它们都有其特定的用例和缺点。
也许，但我认为 yopefonic 的技术被混淆了 - 开发人员应该知道 text-align 如何与 0 自动边距一起工作以实现居中 - 这是经常需要的。如果宽度发生变化，也更容易维护。

【解决方案1】：

你想要这样的东西：

<div style="width: 500px; text-align: center;">

    <div style="margin: 0 auto; width: 100px;">I am centered</div>

</div>

关键是 text-align: center 在父元素上，margin: 0 auto 在内部元素上

【讨论】：

【解决方案2】：

没有浮动：中心。但是当您希望 div 以它的父级为中心时，这应该可以解决问题：

#parent-element{
    position: relative;
}
#element
{
  width: 500px; 
  left: 50%;
  margin-left: -250px; /* - (width/2)  */
  position: absolute;
}

但是，你到底想达到什么目的？

【讨论】：

@dcaunt，如果可以的话，我会否决您的评论。虽然这种技术可能会在小屏幕上导致问题，但有时它正是解决问题所需要的，尤其是对于复杂的分层布局。您的解决方案是更常见的解决方案，但 yopefonic 的解决方案并没有错误。
相比文本对齐方法，最好的用例是什么？我的评论可能过于苛刻了！
@dcaunt，没问题。我同意这不是解决方案，但正如所表明的 text-align 导致了一些问题。

【解决方案3】：

您只能向左或向右浮动元素。

也许描述一下你想要达到什么样的布局。

【讨论】：