없음

Question

HTML

<div class="footer"> 
    <div class="icon"></div> 
</div> 

CSS

.footer { 
    width: 400px; 
    height: 58px; 
    background: #ccc; 
    overflow: hidden; 
    line-height: 82px; 
} 

.icon { 
    width: 82px; 
    height: 82px; 
    border-radius: 50%; 
    background: #41c363; 
    margin: 0 auto; 
} 

위 그림과 같이 I는 UI를 달성하기 위해 노력하고 HTML과 CSS를 사용합니다. 어쨌든 아이콘 클래스를 중앙에서 세로로 정렬 할 수 없습니다.

Fiddle

Answer 1

이 display: flex;를 추가하려면이 CSS, align-items: center;

.footer { 
width: 400px; 
display: flex; 
align-items: center; 
height: 58px; 
background: #ccc; 
overflow: hidden; 
line-height: 82px; 
} 

fiddle

.footer { 
 
    width: 400px; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 58px; 
 
    background: #ccc; 
 
    overflow: hidden; 
 
    line-height: 82px; 
 
} 
 

 
.icon { 
 
    width: 82px; 
 
    height: 82px; 
 
    border-radius: 50%; 
 
    background: #41c363; 
 
    margin: 0 auto; 
 
}

<div class="footer"> 
 
    <div class="icon"></div> 
 
</div>

,313 클래스 .footer에 시도210