將圖標字體跨度與行中的文本跨度對齊

-1

我想將圖標字體<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>

那麼我該如何調整圖標和文本，該文本是在圖標的垂直中心？

來源

2016-03-02 JohnDizzle

文本的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>

來源

2016-03-02 13:01:57 NiZa

請vertical-align和display屬性更新以下類：

CSS

 .navigation { 
      padding-left: 50px; 
      padding-top: 50px; 
      padding-bottom: 50px; 
      display: inline-block; 
     } 

     navigation .material-icons { 
      font-size: 21px; 
      vertical-align: middle; 
     }

來源

2016-03-02 13:01:00

只是增加中古立式對齊：中間的.navigation。材料，圖標將解決這一問題。

.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; 
 
vertical-align: middle; 
 
}

<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>

來源

2016-03-02 13:05:58

將圖標字體跨度與行中的文本跨度對齊

回答

相關問題