Textausrichtung: zentriert, mit Wrapper, Eingabefelder & Button zentrieren sich nicht, aber Logo zentriert sich gut

Question

Auf dieser Seite habe ich ein Logo (Bilddatei, mit einer angepassten Höhe), das sich gut in seinem eigenen div . Dieses Logo ist in einem Wrapper div mit text-align: center eingewickelt und zentriert sich gut. Es gibt auch zwei Texteingabefelder mit einer Suchschaltfläche, die in ein separates div von den Logos eingepackt ist, und sie sind auch in das Wrapper div eingepackt, aber wenn ich die Seite lade, erscheint div auf der linken Seite der Seite.

Wenn ich das searchArea div auskommentieren, so dass der Button und die Boxen nur vom Wrapper umgeben sind, zentriert sich alles gut, aber wird wegen der width -Eigenschaft ausgedehnt.

Wie bekomme ich alles innerhalb der searchArea div, um unter dem Logo zu zentrieren, ohne die eingestellten Stile für die searchArea Klasse zu verlieren ???

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

Um horizontal Zentrum block-level elements wie <div>, sind Sie auf der Suche nach den margin-left und marign-right Eigenschaften gelten, beide mit auto Werte.

Normalerweise können Sie die Kurz verwenden margin: 0 auto, aber wenn man bedenkt Sie haben eine margin-top von 0.8%, müssen Sie beide für Ihre .searchArea Wähler manuell angeben. dies hilft

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

Hoffnung:

Dies kann in der folgenden gesehen werden! :)

Answer 2

Um Blockelemente horizontal zu zentrieren, müssen Sie margin: 0 auto; Aber es gibt Margin-Top: 0,8%; So können Sie es zusammen:

.searchArea { 
    margin: 0.8% auto 0; 
} 

Viel Glück)