Лучший способ разместить текст под изображением значка

Я пытаюсь использовать библиотеку материалов Design Lite.Лучший способ разместить текст под изображением значка

Каков наилучший способ разместить значок на одной из вкладок и добавить текст под ним (имея в виду лучшие практики и масштабируемость).

https://codepen.io/anon/pen/BzAEQb

<html> 
    <head> 
    <!-- Material Design Lite --> 
    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
    <!-- Material Design icon font --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    </head> 
    <body> 
    <!-- Simple header with fixed tabs. --> 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header 
       mdl-layout--fixed-tabs"> 
     <header class="mdl-layout__header"> 
     <div class="mdl-layout__header-row"> 
      <!-- Title --> 
      <span class="mdl-layout-title">Title</span> 
     </div> 
     <!-- Tabs --> 
     <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
      <a href="#fixed-tab-1" class="mdl-layout__tab is-active"><i class="material-icons">person</i><span class="MY-CLASS-2">TAB 1</span> </a> 
      <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> 
      <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a> 
     </div> 
     </header> 
     <div class="mdl-layout__drawer"> 
     <span class="mdl-layout-title">Title</span> 
     </div> 
     <main class="mdl-layout__content"> 
     <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1"> 
      <div class="page-content"><!-- Your content goes here --></div> 
     </section> 
     <section class="mdl-layout__tab-panel" id="fixed-tab-2"> 
      <div class="page-content"><!-- Your content goes here --></div> 
     </section> 
     <section class="mdl-layout__tab-panel" id="fixed-tab-3"> 
      <div class="page-content"><!-- Your content goes here --></div> 
     </section> 
     </main> 
    </div> 
    </body> 
</html>

источник

2016-07-22 Abhishek Jain

Я могу сделать это путем структурирования одной из див, как так:

<a href="#scroll-tab-1" class="mdl-layout__tab is-active MY-CLASS-1"><i class="material-icons">person</i><span class="MY-CLASS-2">Profile</span> </a>

и добавить следующие стили:

.MY-CLASS-1 { 
    position: relative; 
    width: 60px; 
} 

.MY-CLASS-2 { 
    display: block; 
    position: absolute; 
    bottom: -12px; 
    font-size: smaller; 
    left: 198px; 
}

https://codepen.io/anon/pen/XKEQZr

Как я могу сделать этот код лучше в целом?

источник

2016-07-22 11:37:04

HTML

<div class="item"> 
    <img src=""/> 
    <span class="caption">Tab</span> 
</div>

CSS

div.item { 
    vertical-align: top; 
    display: inline-block; 
    text-align: center; 
    width: 50px; 
} 
img { 
    width: 30px; 
    height: 30px; 
    background-color: blue; 
} 
.caption { 
    display: block; 
}

http://jsfiddle.net/ZhLk4/360/

источник

2016-07-22 12:02:26 chirag

HTML

<html> 
    <head> 
    </head> 
    <body> 
    <ul> 
     <li><a href=""><span></span>aaaa</a></li> 
     <li><a href=""><span></span>bbbb</a></li> 
     <li><a href="">cccc</a></li> 
     <li><a href=""><span></span>dddd</a></li> 
    </ul> 
    </body> 
</html>

css

ul, ul li { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

ul li { 
    display: inline-block; 
} 
ul li a { 
    background: #efefef; 
    padding: 0 15px; 
    text-decoration: none; 
    line-height: 40px; 
    display: inline-block; 
} 
ul li a span { 
    background: url('http://findicons.com/files/icons/2255/cologne/32/user.png') no-repeat #ccc; 
    width: 30px; 
    height: 30px; 
    margin: 0 15px 0 0; 
    display: inline-block; 
    vertical-align: middle; 
}

источник

2016-07-22 12:10:52 RandomNoobName

Лучший способ разместить текст под изображением значка

ответ

Смежные вопросы