Question

我是html和CSS的新手。最近遇到了一个大问题。

我在另一个部门有2个师。这两个div都有很少的按钮等，并且彼此相邻 - 内联。但是，当我尝试最小化我的镀铬窗口时，第二个div在第一个下移动，这很棒。但是，它们都与屏幕左侧对齐。我怎么能让他们坚持到中心？

由于我不知道如何更好地解释，这里有一些图片。

分歧如何：

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

调整大小时我想要发生什么：

我真诚地希望有人可以提供某种建议。

非常感谢！

Answer 1

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

.container {
     text-align: center;
}

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

.container * {
     text-align: left;
}

Answer 2

试试这个：

将外部div（父容器）设为text-align: center。

由于子div为inline，父级的{{3}}属性可以控制它们的对齐。

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在垂直显示它们时将两个内部div保持在一起，否则它们将在整个弹性框中均匀分布。

如果您对此答案有任何疑问，请随时与他们联系。

中心内联div调整大小？

3 个答案: