내 경우 수직 정렬을 중간으로 설정하는 방법은 무엇입니까?

Question

나는 두 가지를 달성하기 위해 htmls 요소를 수정하려고 :

1. 수직 중간에 두 glyphicons와 텍스트를 맞 춥니 다.

2. 것은 내가 jsfiddle을 만든 <icon><thanks><icon> 대신

<icon> <thanks> <icon>의 같은 될 텍스트 "감사"와 glyphicons 사이에 작은 틈이 CSS를 수정 (수직 정렬의 중간이 작동하지 않습니다) https://jsfiddle.net/vwdhd1wy/

추가 css없이 두 개의 틈이 생겨서 이상하게 보입니다. 누군가가 그것에 대해 나를 도울 수 있습니까?

Answer 1

작업 코드를 사용하십시오 : 1. 들어 https://jsfiddle.net/vwdhd1wy/4/

수직 중간에 두 glyphicons와 텍스트를 맞 춥니 다. (수직 정렬 중간은 작동하지 않습니다).

반복 된 코드를 원하지 않으므로 CSS를 정리할 수 있습니다. 모든 span 요소에 vertical-align: top;을 추가하여 서로 인접한 인라인 블록 요소가 내용에 따라 지저분해질 수 있으므로 동일한 위치에서 모두 시작되도록하십시오.

line-height: 1을 설정하고 top: 1px; 그래서 당신이 div > span.glyphicon { line-height: 30px; top: 0px; }로이 메소드를 오버라이드 (override) 할 필요가있다 .glyphicon에 대한 몇 가지 유전 코드가 있습니다. 나머지는 단지 height: 30px;과 line-height: 30px; (중간에 배치하기위한 줄 높이)을 설정하는 것입니다.

div > span { 
    display: inline-block; 
    vertical-align: top; 
} 

div > span, div > span.glyphicon { 
    height: 30px; 
    line-height: 30px; 
    top: 0px; 
} 

.left, .right { 
    background-color: red; 
} 

.middle { 
    background-color: grey; 
} 

2. 들어 @ryantdecker 모든 범위의 요소가를 제거 후 공백을 제거 말했듯이 대신

과 같이되기 위해 "감사"와 glyphicons을 텍스트 사이에 작은 틈이 CSS를 수정 여분의 공간이 표시됩니다. 이 공백은 인라인 블록으로 설정된 경우 "인라인"(텍스트) 요소로 처리되므로 인라인 요소 사이에 공백이있을 때마다 HTML을 렌더링 할 때 포함됩니다.

솔루션 :

<span class="left glyphicon glyphicon-forward"></span><span class="middle">Thansk</span><span class="right glyphicon glyphicon-backward"></span> 

Answer 2

이 HTML/CSS를

<div class="mid"> 
    <span class="left glyphicon glyphicon-forward"></span> 
    <span class="middle">Thansk</span> 
    <span class="right glyphicon glyphicon-backward"></span> 
</div> 


    .mid{display:table;} 
    .left { 
     background-color: red; 
     height: 30px; 
     vertical-align:middle; 
     display:table-cell; 
    } 

    .middle { 
     height: 30px; 
     display:table-cell; 
     background-color: grey; 
     vertical-align:middle; 
    } 

    .right { 
     background-color: red; 
     height: 30px; 
     vertical-align:middle; 
     display:table-cell; 
    } 

Answer 3

이

.left { 
     background-color: red; 
     height: 30px; 
    } 

    .middle { 
     height: 30px; 
     display:inline-block; 
     background-color: grey; 
     vertical-align:middle; 
    } 

    .right { 
     background-color: red; 
     height: 30px; 
    } 
    span { 
     align-items: center; 
     display: inline-flex !important; 
     flex-wrap: wrap; 
    }