세그먼트의 세로 정렬 된 콘텐츠 (시맨틱 UI)

Question

세그먼트 클래스 div 안에 콘텐츠를 세로로 가운데 놓을 방법이 있습니까? 뻗어 행 클래스 덕분에, 3 열이 같은 높이가 지금

<div class="stretched row"> 
    <div class="two wide column"> 
    <div class="ui basic segment"> 
     <select> 
     <!-- OPTION VALUES IN HERE --> 
     </select> 
    </div> 
    </div> 
    <div class="column"> 
    <div class="ui basic segment> 
    <!-- DIV CONTENT --> 
    </div> 
    </div> 
    <div class="column"> 
    <div class="ui basic segment"> 
     <!-- DIV CONTENT --> 
    </div> 
    </div> 

, 그래서 같이보고, 그들 내부의 세그먼트 된 div를 수행합니다 : 나는 다음과 같은 마크 업을 가지고

3 세그먼트 내의 콘텐츠가 세로로 가운데에 들어가 있기를 바랍니다. 대신 항상 맨 위에 표시됩니다. class = "Ui 중간 정렬 기본 세그먼트"을 추가하려고 시도했지만 작동하지 않습니다. class = "middle aligned column"을 부모 열에 추가하면 열의 모든 세로 공간을 차지하지 않으며 경계선과 색칠 된 배경이 있으므로 이상하게 보입니다 (각 세그먼트 자체 높이가 있음).

세그먼트의 높이를 알지 못하기 때문에 세그먼트에 패딩을 추가하지 않으려합니다 (선택에 따라 다릅니다). 여러 줄의 텍스트 (두 줄에서 7 줄까지 다양합니다. 사용자가 선택하는 항목).

감사합니다.

Answer 1

@VXp가 제안한대로 {display: flex; align-items: center}을 세그먼트 클래스에 적용하면 완벽하게 작동했습니다.