垂直整列 - 浮動小数点型の要素navbar

Question

私は、左右の浮動要素をナビゲーションバーに垂直に整列しようとしています。 （ '折りたたまれた' Nav BarがClearfix Hackを適用していた場所）。ナビゲーションバーの高さは、左浮動タイトル（デフォルトでh2、2em）によって決まります。しかし、右に浮かんだ要素（入力とボタンのあるフォーム）は、アイテムを垂直方向にセンタリングする変換アプローチを試していても、中央に座っていませんか？ トランスフォームの垂直方向のアラインメントを解除すると、フォームがさらに上に移動します（下方向ではなく中央に配置されます）。

CodePen（https://codepen.io/yunti/pen/xdvpQK）

https://codepen.io/yunti/pen/xdvpQK 

.header { 
 
    background-color: darkorange; 
 
} 
 

 
.header-title { 
 
    float: left; 
 
    padding-left: 10px; 
 
    color: white; 
 
    font-weight: 400; 
 
} 
 

 
.form-header { 
 
    float: right; 
 
    padding-right: 10px; 
 
    /*position: relative;*/ 
 
    /*top: 50%;*/ 
 
    /*transform: translateY(-50%);*/ 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
input, 
 
button { 
 
    vertical-align: middle; 
 
} 
 

 
.form-control { 
 
    margin: 10px; 
 
    height: 34px; 
 
    width: 180px; 
 
    border-radius: 4px; 
 
    border: 1px solid #ccc; 
 
    font-size: 18px; 
 
    color: #555; 
 
} 
 

 
.form-control::placeholder { 
 
    color: grey; 
 
} 
 

 
.btn { 
 
    margin-left: 10px; 
 
    height: 34px; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 
    line-height: 1.42857143; 
 
    white-space: nowrap; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    background-color: forestgreen; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    color: white; 
 
    cursor: pointer; 
 
}

<div class="header clearfix"> 
 
    <h1 class="header-title">Weather App</h1> 
 
    <div class="form-header"> 
 
    <form class="form-group"> 
 
     <input class="form-control" type="text" placeholder="St. George, Utah" /> 
 
     <button class="btn">Get Weather</button> 
 
    </form> 
 
    </div> 
 
</div>

Answer 1

フレキシボックスは、これは本当に簡単です。親にdisplay: flex; justify-content: space-between; align-items: center;を追加すると、それは親の要素を分離し、それらを垂直に整列させます。

.header { 
 
    background-color: darkorange; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
.header-title { 
 
    padding-left: 10px; 
 
    color: white; 
 
    font-weight: 400; 
 
} 
 

 
.form-header { 
 
    padding-right: 10px; 
 
} 
 

 

 
.form-control { 
 
    margin: 10px; 
 
    height: 34px; 
 
    width: 180px; 
 
    border-radius: 4px; 
 
    border: 1px solid #ccc; 
 
    font-size: 18px; 
 
    color: #555; 
 
} 
 

 
.form-control::placeholder { 
 
    color: grey; 
 
} 
 

 
.btn { 
 
    margin-left: 10px; 
 
    height: 34px; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 

 
    line-height: 1.42857143; 
 
    white-space: nowrap; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    background-color: forestgreen; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    color: white; 
 
    cursor: pointer; 
 
}

<div class="header"> 
 
    <h1 class="header-title">Weather App</h1> 
 
    <div class="form-header"> 
 
    <form class="form-group"> 
 
     <input class="form-control" type="text" placeholder="St. George, Utah" /> 
 
     <button class="btn">Get Weather</button> 
 
    </form> 
 
    </div> 
 
</div>

それとも、フレキシボックスを使用しない場合、あなたはvertical-align: middle

.header { 
 
    background-color: darkorange; 
 
    display: table; 
 
    width: 100%; 
 
    
 
} 
 

 
.header-title { 
 
    padding-left: 10px; 
 
    color: white; 
 
    font-weight: 400; 
 
} 
 

 
.header-title, .form-header { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
.form-header { 
 
    padding-right: 10px; 
 
    text-align: right; 
 
} 
 

 
.form-control { 
 
    margin: 10px; 
 
    height: 34px; 
 
    width: 180px; 
 
    border-radius: 4px; 
 
    border: 1px solid #ccc; 
 
    font-size: 18px; 
 
    color: #555; 
 
    vertical-align: middle; 
 
} 
 

 
.form-control::placeholder { 
 
    color: grey; 
 
} 
 

 
.btn { 
 
    margin-left: 10px; 
 
    height: 34px; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 

 
    line-height: 1.42857143; 
 
    white-space: nowrap; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    background-color: forestgreen; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    color: white; 
 
    cursor: pointer; 
 
    vertical-align: middle; 
 
}

<div class="header"> 
 
    <h1 class="header-title">Weather App</h1> 
 
    <div class="form-header"> 
 
    <form class="form-group"> 
 
     <input class="form-control" type="text" placeholder="St. George, Utah" /> 
 
     <button class="btn">Get Weather</button> 
 
    </form> 
 
    </div> 
 
</div>

との組み合わせで、子供に親の display: table、 display: table-cellを使用することができます

Answer 2

あなたはあなたのH1要素（ "天気アプリ" - 22px）とあなたの入力/ボタン（10px）のマージンの余裕。あなたのマージンをこれらすべての要素で同じようにしてください。