テキストアライン：ラッパー、センター、入力ボックス、ボタンは中心に配置されていませんが、ロゴセンターはきめ細かい

Question

このページでは、自分自身のdivに最適なロゴ（画像ファイル、 。このロゴはtext-align: centerのラッパーdivでラップされており、細かい部分は中心になります。 2つのテキスト入力ボックスもあり、検索ボタンはロゴとは別のdivにラップされており、ラッパーdivにもラップされていますが、divがページの左側に表示されます。

searchArea divをコメントアウトすると、ボタンとボックスはラッパーのみで囲まれているため、すべてがうまく重くなりますが、widthプロパティのために伸びてしまいます。

searchAreaクラスの設定スタイルを失うことなく、searchArea div内のすべてのアイテムをロゴの中央に配置するにはどうすればよいですか？

HTML：

<div id="logo" class="centerWrapper"> 
    <img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo"> 
</div> 

<div id="search" class="centerWrapper"> 
    <div id="searchArea" class="searchArea"> 
     <input type="text" class="inputBox" name="charName" placeholder="Character Name"><br> 
     <input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br> 
     <button type="button" class="searchButton">Search</button> 
    </div> 
</div> 

CSS：

.centerWrapper { 
    text-align: center; 
} 
.logo { 
    height: 46px; 
} 
.searchArea{ 
    margin-top: 0.8%; 
    height: 125px; 
    width: 340px; 
} 
input.inputBox { 
    background-color: #0B122F; 
    border-color: #877055; 
    color: #4A4E5A; 
    margin: 5px 0px; 
    padding: 5px 10px 5px 10px; 
    width: 72%; 
} 

Answer 1

<div>のような水平方向の中心block-level elementsするためには、margin-leftとmarign-rightプロパティ適用を探しています、両方ともauto値。

通常は、速記margin: 0 autoを使用することができますが、あなたは0.8%のmargin-topを持って考えると、あなたはあなたの.searchAreaセレクタのための手動の両方を指定する必要があります。

これは、次の中で見ることができます。

.centerWrapper { 
 
    text-align: center; 
 
} 
 

 
.logo { 
 
    height: 46px; 
 
} 
 

 
.searchArea { 
 
    margin-top: 0.8%; 
 
    height: 125px; 
 
    width: 340px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
input.inputBox { 
 
    background-color: #0B122F; 
 
    border-color: #877055; 
 
    color: #4A4E5A; 
 
    margin: 5px 0px; 
 
    padding: 5px 10px 5px 10px; 
 
    width: 72%; 
 
}

<div id="logo" class="centerWrapper"> 
 
    <img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo"> 
 
</div> 
 

 
<div id="search" class="centerWrapper"> 
 
    <div id="searchArea" class="searchArea"> 
 
    <input type="text" class="inputBox" name="charName" placeholder="Character Name"><br> 
 
    <input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br> 
 
    <button type="button" class="searchButton">Search</button> 
 
    </div> 
 
</div>

は、この情報がお役に立てば幸い！ :)

Answer 2

ブロック要素を水平方向に中央に配置するには、マージンを使用する必要があります。0 auto; マージントップ：0.8％; だから、あなたはそれを一緒に使用することができます！

.searchArea { 
    margin: 0.8% auto 0; 
} 

幸運を）