在完美的中間對齊兩個元素

我似乎無法弄清楚如何使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

在完美的中間對齊兩個元素

回答

相關問題