아이콘 글꼴 <span>태그를 <span>행 의 텍스트와 정렬하고 싶습니다 . 두 가지 <span>가 일렬로 있지만 아이콘이 div 위에 "떠 다니는" 것처럼 보입니다 .
.navigation {
padding-left: 50px;
padding-top: 50px;
padding-bottom: 50px;
}
.navigation .counter {
background: red;
vertical-align: middle;
font-size: 13px;
}
.navigation span {
background: green;
padding-bottom: 0px;
}
.navigation .material-icons {
font-size: 21px;
}<head>
<meta charset="utf-8" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="[email protected]"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<div class="navigation">
<span><i class="material-icons">arrow_drop_down</i></span>
<span><i class="material-icons">arrow_drop_up</i></span>
<span class="counter">select floor</span>
</div>그렇다면 텍스트가 아이콘의 수직 중앙에 있도록 아이콘과 텍스트를 어떻게 정렬 할 수 있습니까?
line-height텍스트 요구는와 동일합니다 font-size아이콘의의. 사용 vertical-align:middle;이 방법으로 필요가 없습니다.
.navigation {
padding-left: 50px;
padding-top: 50px;
padding-bottom: 50px;
}
.navigation .counter {
background: red;
font-size: 13px;
line-height:21px;
vertical-align:top;
}
.navigation span {
background: green;
padding-bottom: 0px;
display: inline-block;
}
.navigation .material-icons {
font-size: 21px;
vertical-align:top;
}<head>
<meta charset="utf-8" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="[email protected]"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<div class="navigation">
<span><i class="material-icons">arrow_drop_down</i></span>
<span><i class="material-icons">arrow_drop_up</i></span>
<span class="counter">select floor</span>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다