텍스트 스팬의 내부가 올바르게 배치되지 않았습니다.

Question

원 텍스트를 올바른 위치로 가져 오는 데 문제가 있습니다. 특히 수직 위치. 그것은 수직 및 수평으로 중심에 있어야합니다. 그리고 그것은 변해야 만합니다.

페이지 중간에 단추를 가져 오려고합니다. 두 다른 div가 나중에 채워질 것입니다.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Lato", sans-serif; 
 
}

<div style="background-color: grey; position: static;height: 80px"> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
\t <div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center"> 
 
\t \t <span style=" background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >&#9863;</span> 
 
\t </div> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
</div>

그것은 가능성이 쉬운 수정합니다. 시간 내 주셔서 감사합니다.

Answer 1

이 상황에서 line-height 속성을 사용하여 수직 정렬을 조정할 수 있습니다. 아래 스 니펫을 참조하십시오.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Lato", sans-serif; 
 
}

<div style="background-color: grey; position: static;height: 80px"> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
\t <div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center"> 
 
\t \t <span style="line-height:1.2; background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >&#9863;</span> 
 
\t </div> 
 
\t <div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div> 
 
</div>