三个 div 的一个始终在中心答案

【问题标题】：Three div's one always on center三个 div 的一个始终在中心
【发布时间】：2015-03-19 02:19:14
【问题描述】：

我正在尝试编写我的新网页。在顶部，我想要一个名为 top-bar-container 的中心 div，以及其他三个 div 类似的东西：

<div id="top-bar-container">
    <div id="top-main-menu-container">
        <ul id="main-menu">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </div>

    <div id="logo-placeholder">
        <a href="#"><img src="images/logo.png" width="300" height="75"></a>
    </div>

    <div id="mail-login-container">

    </div>
</div>

当试图获得div 的效果时，左边总是在最左边、最右边、最右边，而徽标总是在中间。我喜欢使用 position: absolute 但这种不情愿。我必须以不同的方式处理。有谁能帮我实现这个效果吗？

【问题讨论】：

css 有 float 可以帮助你。否则你也可以使用table
如果您想学习 html 和 css，请查找一些基本教程（w8 网上有很多有趣的东西供您参考）。为此，基本上您必须设置容器的宽度（或最大宽度）以创建边界并使用边距自动或文本对齐中心将其居中
永远不要为此使用表格（永远不要！如果不是 1990 年代的话）。浮点数只能在特定情况下使用（如果不是 2000 年代）。现在在 2010 年的一半时间里，我们使用了 GRID！我们不是生活在黑暗时代。对你来说最好的事情就是学习如何使用网格，j4n.co/blog/Creating-your-own-css-grid-system
感谢金加！有帮助！

标签： html css

【解决方案1】：

这是一种方法。

#top-bar-container > div {
 float: left;
}

【讨论】：

【解决方案2】：

您可以将链接向左浮动，然后将邮件容器向右浮动。将文本对齐中心应用于父 div，一切都应该没问题。

#top-bar-container {
    text-align: center;
}
#top-main-menu-container {
    float:left;
}
#mail-login-container {
    float:right;
}

在这里拉小提琴：

http://jsfiddle.net/3eut86s6/

【讨论】：