센터 사용자

Question

내가 할 노력하고있어

.selection_user { 
 
    display: block; 
 
    background-color: #2D2C31; 
 
    text-align: center; 
 
    line-height: 75px; 
 
}

<div class="select_user_menu"> 
 
    <div class="selection_user">User1</div> 
 
    <div class="selection_user">Username</div> 
 
    <div class="selection_user">User</div> 
 
</div>

한 줄에 사용자 목록 중심이 코드 조각이 목록을 표시합니다.

예 :

Answer 1

당신은 안에 다른 div 요소를 확인하고 부모 요소에 Flexbox를 사용할 수 있습니다.

.select_user_menu { 
 
    border: 1px solid black; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.selection_user { 
 
    line-height: 75px; 
 
}

<div class="select_user_menu"> 
 
    <div class="wrap"> 
 
    <div class="selection_user">User1</div> 
 
    <div class="selection_user">Username</div> 
 
    <div class="selection_user">User</div> 
 
    </div> 
 
</div>

Answer 2

당신은 텍스트를 왼쪽 정렬 자식 요소에 그 래퍼와 text-align: left;의 중심을 외부 용기에 text-align: center을 적용 display: inline-block;을 할당 래퍼 요소로 세 가지 사용자 이름을 넣을 수 있습니다 거기 :

.select_user_menu { 
 
    text-align: center; 
 
} 
 

 
.select_user_menu>div { 
 
    display: inline-block; 
 
} 
 

 
.selection_user { 
 
    background-color: #ddd; 
 
    text-align: left; 
 
    line-height: 35px; 
 
    padding: 20px; 
 
}

<div class="select_user_menu"> 
 
    <div> 
 
    <div class="selection_user">User1</div> 
 
    <div class="selection_user">Username</div> 
 
    <div class="selection_user">User</div> 
 
    </div> 
 
</div>