div와 span 요소를 같은 선을 따라 가운데에 배치하는 방법은 무엇입니까?

Question

I이 추한 정렬을 수신하는

는 I 텍스트 스팬 DIV 직사각형 수직 중앙에 하나 개의 라인에서 육안으로 늘. 내가 좋아하는 방식으로 사용할 수 없습니다

\t <div> 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label1</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label2</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label3</span> 
 
\t </div>

: 여기 내 html 코드이다 "paddind 하단 : 5px를;" 왜냐하면 나는이 HTML 코드를 프로그램 적으로 생성하고 글꼴 크기뿐만 아니라 div 너비와 높이를 자주 변경하기 때문입니다. 그래서 제 질문은 크기에 관계없이 요소를 정렬하는 방법입니다.

Answer 1

을 사용해야합니다

span, 
 
div { 
 
    vertical-align: middle; 
 
}

<div> 
 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label1</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label2</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label3</span> 
 
</div>

---

또는 플렉스 컨테이너에 모든 것을 랩핑하고 아이템 센터를 정렬 할 수 있습니다. 그럼 당신은 다음처럼 HTML 요소에 margin: auto 선언을 제거하는 것입니다 : 그들은 레이블에서 약간의 간격을 그래서

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
span { 
 
    padding-left: 0.5rem 
 
}

<div class='flex'> 
 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label1</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label2</span> 
 
    <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 

 
    <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div> 
 
    <span style="display:inline-block; font-size: 30px;">label3</span> 
 
</div>

가 나는 또한 스팬 요소에 padding-left을 추가했다. 문제를 해결할 수

Answer 2

당신은 모든 inline-blocks에 vertical-align: top;를 사용할 수 있지만, 당신은 당신과 같이 vertical-align: middle를 사용할 수있는 클래스가 아닌 인라인 스타일

.alignclass { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div> 
 
    <div class="alignclass" style="background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span class="alignclass" style="font-size: 30px;">label1</span> 
 
    <span class="alignclass" style="width: 50px;">&nbsp;</span> 
 

 
    <div class="alignclass" style="background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span class="alignclass" style="font-size: 30px;">label2</span> 
 
    <span class="alignclass" style="width: 50px;">&nbsp;</span> 
 

 
    <div class="alignclass" style="background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div> 
 
    <span class="alignclass" style="font-size: 30px;">label3</span> 
 
</div>

Answer 3

어쩌면 라인 높이,

<div> 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; line-height: 35px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label1</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; line-height: 35px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label2</span> 
 
\t \t <span style="display:inline-block; width: 50px;">&nbsp;</span> 
 
\t \t 
 
\t \t <div style="display: inline-block; background-color: lightgrey; height: 25px; line-height: 35px; width :40px; margin: auto;">&nbsp;</div> 
 
\t \t <span style="display:inline-block; font-size: 30px;">label3</span> 
 
\t </div>