텍스트 정렬 : 가운데, 래퍼, 입력 상자 및 단추가 중앙에 위치하지 않지만 로고 가운데가 잘 맞습니다.

Question

이 페이지에는 고유 한 div에 잘 맞는 로고가있는 이미지 파일이 있습니다. . 이 로고는 text-align: center과 함께 래퍼 div로 묶여 있으며 괜찮습니다. 또한 2 개의 텍스트 입력 상자에는 검색 단추가 로고와 별도의 div로 묶여 있고 또한 래퍼 div에도 래핑되지만 div가 페이지의 왼쪽에 나타나는 페이지를로드하면 검색 단추가 래핑됩니다.

searchArea div를 주석 처리하면 버튼과 상자가 래퍼로만 둘러싸여 있기 때문에 모든 것이 잘되지만 폭 속성으로 인해 펼쳐집니다.

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

block-level elements<div> 같은 수평 중심에, 당신은 margin-left 및 marign-right 속성을 적용 찾고있어 둘 다 auto 값.

는 일반적으로 당신은 당신은 당신의 .searchArea 선택에 대해 수동으로 모두를 지정해야합니다, 당신은 0.8%의 margin-top을 축약 margin: 0 auto를 사용하지만, 고려 수 있습니다.

이는 다음에서 볼 수있다 :

.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 자동; 여백 : 0.8 %; 그래서 당신은 그것을 함께 사용할 수 있습니다

.searchArea { 
    margin: 0.8% auto 0; 
} 

행운을 빕니다)