css 两个div上下排列

CSS是一种能够使你网页变得更加美观的语言。CSS可以帮助你对HTML元素的布局和风格进行变更，尤其是在设计页面时。

在CSS中，我们可以通过设置属性来控制元素的样式，在这里我们将学习如何创建两个div元素，使它们上下排列。

    div class="container">
            div class="box1">
                p>
    Box1/p>
            /div>
            div class="box2">
                p>
    Box2/p>
            /div>
        /div>

在上面的代码中，我们首先创建一个名为container的元素，该元素包含两个子元素，分别为box1和box2。现在我们需要使用CSS来确定它们的样式。

    .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
    }
    .box1, .box2 {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
    }
    

在这里，我们为container设置了display: flex，这意味着我们将使用Flexbox来控制其子元素的布局。由于我们想要在垂直方向上排列它们，因此我们将flex-direction属性设置为column。我们同时设置justify-content: center和align-items: center属性，这将使它们在垂直和水平方向上都居中显示。

我们为box1和box2定义了一个相同的样式。我们设置了它们的宽度和高度，并设置了一个边框，以突出它们。最后，我们将text-align属性设置为center，这将使文字在盒子中水平居中显示。

现在我们可以看到我们的两个盒子成功地在垂直方向上排列了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！