테이블에 텍스트와 이미지의 수직 중심 맞춤

Question

테이블을 만들고 각 행에 텍스트와 이미지를 세로로 배치하려고합니다. 나는 행운과 함께 td와 tr 요소 모두에 style=vertical-align:middle을 추가하려고 시도했다. 여기

나는 테이블의 첫 번째 몇 행에있어 무엇 :이 코드

<table border="1" cellpadding="3" cellspacing="1" class="table dataTable" style="border:1px solid #f0f0f0;"> 
 
    <tbody> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Use Case</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p><img align="left" alt="" background:="" class="img-responsive" src="imgname" style="width: 50px; height: 50px; margin-left:10px; margin-right: 10px;" />Live event broadcasting</p> 
 
     </td> 
 
    </tr> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Industry</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p style="margin-left:10px;">Nonprofit</p> 
 
     </td> 
 
    </tr>

(그리고 거의 모든 다른 변수는 내가 해봤), 테이블 다음과 같이 표시됩니다. table

도움이 될만한 조언이 있으면 알려주세요.

Answer 1

당신은 align-items: center

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

<table border="1" cellpadding="3" cellspacing="1" class="table dataTable" style="border:1px solid #f0f0f0;"> 
 
    <tbody> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Use Case</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p class="flexbox"><img src="http://placehold.it/50x50" align="left" alt="" background:="" class="img-responsive" src="imgname" style="width: 50px; height: 50px; margin-left:10px; margin-right: 10px;" />Live event broadcasting</p> 
 
     </td> 
 
    </tr> 
 
    <tr style="background: #f0f0f0;"> 
 
     <td colspan="3"><strong>Industry</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3"> 
 
     <p style="margin-left:10px;">Nonprofit</p> 
 
     </td> 
 
    </tr>

와 인 flexbox를 추가 할 수 있습니다