在完美的中间对齐两个元素

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

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

谢谢！

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%; 
 
}

<!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>

来源

2017-08-13 Jeremy1948

什么是预期输出 –

尝试flex-direction: column;这会让他们出现在彼此的顶部。

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%; 
 
}

<!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>

来源

2017-08-13 07:34:02

要垂直对齐的箱子的内容，你需要添加align-items: center他们的CSS。

来源

2017-08-13 07:35:19 mchaste

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

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

来源

2017-08-13 07:58:06

在完美的中间对齐两个元素

回答

相关问题