在调整大小时居中内联 div？

Question

我对 html 和 CSS 很陌生。最近遇到了一个大问题。

我在另一个 division 中有 2 个 divisions。这两个 div 都有几个按钮等，并且彼此相邻 - 内联。但是，当我尝试最小化我的 chrome window 时，第二个 div 移动到第一个下方，这很棒。但是，它们都与屏幕左侧对齐。我怎样才能让他们坚持居中？

不知道怎么解释比较好，放几张图吧

div视觉效果如何：

调整浏览器大小时会发生什么：

我希望通过调整大小发生什么：

我真诚地希望有人能提供一些建议。

非常感谢！

Answer 1

您可以通过添加 text-align: center; 使内联元素居中；到容器元素。

.container {
     text-align: center;
}

如果您不希望元素中的文本居中，则...

.container * {
     text-align: left;
}

Answer 2

试试这个：

给外div（父容器）一个text-align: center.

由于子div是inline，所以父div的text-align 属性可以控制它们的对齐方式。

Answer 3

根据你的问题，我假设你对水平居中感兴趣而不是垂直居中。

我对 HTML / CSS 也很陌生，但在过去的几周里，我发现 flex 工具非常有用。使用 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 已被证明是最有帮助的。

以下 HTML 和 CSS 文件说明了如何使用 flex 实现所需的效果。

HTML

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">

        <meta name    = "viewport"
              content = "width = device-width, initial-scale = 1.0"
        >

        <link href = "CSS/Example.css"
              rel  = "stylesheet"
              type = "text/css"
        >
    </head>

    <body>
        <div id    = "entire-page"
             class = "empty-cell"
        >
            <div id    = "inner-div-1"
                 class = "empty-cell"
            >
            </div>

            <div id    = "inner-div-2"
                 class = "empty-cell"
            >
            </div>
        </div>
    </body>
</html>

CSS

html,
*
{
    border      : 0;
    box-sizing  : border-box;
    margin    : 0;
    padding     : 0;
}

.empty-cell
{
    min-height : 1px;
}

#entire-page 
{
    align-content    : flex-start;
    background-color : blue;
    display          : flex;
    flex-wrap        : wrap;
    float            : left;
    height           : 100vh;
    justify-content  : center;
    width            : 100%;
}

#inner-div-1
{
    background-color : red;
    display : block;
    float : left;
    height           : 200px;
    width            : 400px;
}

#inner-div-2
{
    background-color : yellow;
    display : block;
    float : left;
    height           : 200px;
    width            : 400px;
}

我使用了 flex-wrap : wrap 以便第二个 div 在一行中不再有足够的空间容纳两者时换行到下一行。

我使用 justify-content : center 将 flex-box 的内容水平居中（即两个内部 div）。

我使用 align-content : flex-start 将两个 inner-div 垂直显示在一起，否则它们会在整个 flex-box 中均匀分布。

如果您对此答案有任何疑问，请随时提问。

在调整大小时居中内联 div？

Center inline divs on resize?

html

css

resize