Question

我使用的是materializecss，我希望我的DIV能够以干净的方式垂直居中，也许是物质化的方式？

＆＃13;

<div class="container">
    <div class="row">
        <div class="col s12  infobox center">
            <div class="col s6">
                <div class="card grey darken-3">
                    <div class="card-content white-text">
                        <span class="card-title">BOX 1</span>
                        <p>BOX 1</p>
                    </div>
                </div>
            </div>
            <div class="col s6">
                <div class="card grey darken-3">
                    <div class="card-content white-text">
                        <span class="card-title">BOX 2</span><br>
                        <p>BOX 2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

这就是我想要的：

Answer 1

要使valign-wrapper工作，容器本身必须有一些高度。大多数只是崩溃到内容高度。您可以将高度设置为某个固定值，也可以使用百分比。但是如果你使用百分比，你需要确保你的容器容器也有一些高度。

在这个例子中，我展示了如何在body：

内垂直对齐

因此，如果您将html和body设置为高度100％：

html, body, .my-wrapper {
  height: 100%;
}

注意除了我自己的包装类之外，我如何将html和body都设置为100％。

现在我可以将valign-wrapper添加到我的容器中，您会看到它的内容是集中的：

<body>
    <div class="my-wrapper valign-wrapper center-align">
        ... content to be vertically aligned ...
    </div>
</body>

关键是你的容器必须有一个高度，否则它不起作用。你可以自己设置高度，或让布局像这种情况一样处理它。

<强>更新

使用网格类进行水平居中。

您可以使用网格大小和偏移量的组合将内容放在中心（或您喜欢的位置）：

<body>
    <div class="my-wrapper valign-wrapper center-align">
        ... content to be vertically aligned ...
        <div class="row">
            <div class="col s12 m8 offset-m2 l6 offset-l3>
               ... content centered 6 wide on large ...
               ... content centered 8 wide on medium ...
               ... content centered 12 wide on small ...
            </div>
        </div>
    </div>
</body>

请注意，row和col齐头并进。

我创建了 example on Fiddle for you

（ps：必须有这样做的弹性盒版本）

Answer 2

为了使用materialize对div，section或design的一部分进行verticaly对齐，您应该将height添加到.valign-wrapper，如下所示：materializecss

演示：demo

Answer 3

我是通过在包含你的信息框的行中添加一个innerdiv类来实现的，然后应用下面的css，检查它是否适合你：

<style>
    .innerDiv{
        width: inherit;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>        

<div class="container">            
    <div class="row innerdiv">
        <div class="col s12  infobox center-align">
            <div class="col s6">
                <div class="card grey darken-3">
                    <div class="card-content white-text">
                        <span class="card-title">BOX 1</span>
                        <p>BOX 1</p>
                    </div>
                </div>
            </div>
            <div class="col s6">
                <div class="card grey darken-3">
                    <div class="card-content white-text">
                        <span class="card-title">BOX 2</span><br>
                        <p>BOX 2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 4

您可以尝试将CSS属性添加到infobox Div或卡片div：

vertical-align: middle;

或者只是添加Padding-top

这两者都不是物质化的，但我认为具体化并不具备垂直对齐功能。

<强> //修改

我错了。有一种Materialize方法，只需在此处将主要valign-wrapper添加到主Div。对于标题，您可以使用valign。

About align in Materialize

Answer 5

Materialisecss为您提供了一些小帮手http://materializecss.com/helpers.html

第一个用于垂直对齐。

Answer 6

文字对齐

这些类用于水平对齐内容： .left-align ， .right-align 和 .center-align 。

left-align：这应该左对齐

右对齐：这应该是右对齐的

center-align：这应该是居中对齐的

<div><h5 class="left-align">This should be left aligned</h5></div> <div><h5 class="right-align">This should be right aligned</h5></div> <div><h5 class="center-align">This should be center aligned</h5></div>

Answer 7

display: inline-block;
vertical-align: middle;

Answer 8

首先让我们看看materializecss如何使用flexbox属性垂直对齐代码（在materialize.min.css文件中包含的css文件中搜索“ valign-wrapper”以进行检查）。

.valign-wrapper{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}

因此，仅使用HTML和CSS即可轻松地将上述两个元素垂直对齐（请参见下面的示例）。

CSS代码：

.my-container{
    display:flex;
    align-items:center;
    height: 100vh;
}
.box-container>div{
    display:inline-block;
}

还有HTML代码：）

<div class="my-container">
    <div class="box-container">
        <div>Box A</div>
        <div>Box B</div>
    </div>
</div>

Materializecss div垂直居中

8 个答案: