2つの要素を真ん中に整える

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

垂直ボックスの内容を揃えるために、あなたは自分のCSSにalign-items: centerを追加する必要があります。

出典

2017-08-13 07:35:19 mchaste

メインのdivブロックの場合、と入力し、displayの属性をblockに設定します。それは動作します！

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

出典

2017-08-13 07:58:06

2つの要素を真ん中に整える

答えて

関連する問題