가운데 정렬 텍스트

Question

나는 다음과 같은 HTML이 다음을 채우기 위해 내가 바로 정렬하기 위해 두 개의 링크를 만들기 위해 플렉스 박스를 사용했습니다

<div class="toolbar"> 
    <span>My title</span> 
    <a href="#">User Name</a> 
    <a href="#"> 
     <img src="http://image.flaticon.com/icons/png/128/56/56805.png" /> 
    </a> 
</div> 

하고 "내 제목"텍스트를 다음 예제와 같이 공간을 재 작성하십시오. https://jsfiddle.net/tz472j3o/

이제는 도구 막대에서 텍스트 및 이미지 링크를 세로 가운데에 배치해야합니다. align-items: center으로이 작업을 수행 할 수 있다는 것을 알았지 만 마우스를 가리킬 때 링크의 배경색을 변경해야하므로 툴바에서 모든 수직 간격을 가져야합니다.

그래서 필요한 요소는 사용 가능한 모든 공간을 차지하도록 세로로 늘어나고 그 안에 텍스트를 세로로 가운데에 배치하는 요소입니다.

Answer 1

링크display:flex 및 align-items:center으로 지정하십시오. a에서

.toolbar { 
 
    background-color: lightblue; 
 
    height: 40px; 
 
    display: flex; 
 
} 
 
span { 
 
    flex-grow: 1; 
 
    align-self: center; 
 
} 
 
a { 
 
    margin-left: 5px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
a:hover { 
 
    background-color: white; 
 
} 
 
img { 
 
    width: 20px; 
 
}

<div class="toolbar"> 
 
    <span>My title</span> 
 
    <a href="#">User Name</a> 
 
    <a href="#"> 
 
    <img src="http://image.flaticon.com/icons/png/128/56/56805.png" /> 
 
    </a> 
 
</div>

Answer 2

사용 img 그게 전부에 vertical-align:middle :

.toolbar a img 
{ 
    vertical-align:middle; 
}