Question

我是CSS新手并且一直在学习它。

我似乎无法弄清楚如何使Div中的2个元素完全垂直对齐。我一直在阅读很多文章，但我仍然无法理解我做错了什么。

我附上了我的代码 - 在我的学习之旅中，你的帮助会很棒。

谢谢！

＆＃13;

h1 {
  color: green;
}

* {
  font-family: 'Roboto', sans-serif;
}


}
.center {}
.container1 {
  width: auto;
  display: flex;
  padding: 10px;
  height: auto;
}
.box-1 {
  padding: 10px;
  margin: 2px;
  border: 2px solid;
  display: flex;
  flex: 33%;
}
.box-2 {
  border: 2px solid;
  margin: 2px;
  display: flex;
  order: 1;
  flex: 33%;
}
.box-3 {
  margin: 2px;
  border: 2px solid;
  display: flex;
  order: 2;
  flex: 33%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/main.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container1">
    <div class="box-1">
      <div class="center">
        <h1>I am box number 1</h1>
        <img src="https://placekitten.com/g/400/303" alt="Cute pupies">
      </div>

    </div>
    <div class="box-2">
      <h1>I am box number 2</h1>
    </div>

    <div class="box-3">
      <h2>I am box number 3</h2>
    </div>

  </div>


</body>

</html>

＆＃13;

Answer 1

尝试flex-direction: column;它会使它们显示在彼此之上。

＆＃13;

h1 {
  color: green;
}

* {
  font-family: 'Roboto', sans-serif;
}


}
.center {}
.container1 {
  width: auto;
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: auto;
}
.box-1 {
  padding: 10px;
  margin: 2px;
  border: 2px solid;
  display: flex;
  flex: 33%;
}
.box-2 {
  border: 2px solid;
  margin: 2px;
  display: flex;
  order: 1;
  flex: 33%;
}
.box-3 {
  margin: 2px;
  border: 2px solid;
  display: flex;
  order: 2;
  flex: 33%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/main.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container1">
    <div class="box-1">
      <div class="center">
        <h1>I am box number 1</h1>
        <img src="https://placekitten.com/g/400/303" alt="Cute pupies">
      </div>

    </div>
    <div class="box-2">
      <h1>I am box number 2</h1>
    </div>

    <div class="box-3">
      <h2>I am box number 3</h2>
    </div>

  </div>


</body>

</html>

＆＃13;

Answer 2

要垂直对齐框的内容，您需要将align-items: center添加到其CSS中。

Answer 3

对于您的主div块，在.container1，将display属性设置为block。它会工作！

.container1 {
    width: auto;
    display: block;
    flex-direction: column;
    padding: 10px;
    height: auto; }

在完美的中间

3 个答案: