Иконки дизайна материалов, как центрировать их как текст?

Я пытался сделать какую-то навигационную панель с MaterializeCSS с 3 ссылками, каждая из которых имеет ширину 33% от навигационной панели, и я хочу центрировать текст внутри ссылок (даже значков)

Если я не помещаю левый или правый классы, текст и значок не остаются в одной строке... Но если я добавляю левый класс к значку, он плавает влево, поэтому, учитывая, что навигационная панель имеет ширину :100%, слишком много места между иконкой и текстом.

Вот HTML

<div id="secondary-navbar"><nav>
  <div class="nav-wrapper">
    <ul>
      <li>
        <a href="#!">
          <i class="material-icons left">event</i>Calendario
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">location_on</i>Mapa
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">apps</i>Galería
        </a>
      </li>
    </ul>
  </div>
</nav></div>

И CSS

#secondary-navbar nav
{
    background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a
{
    font-size:1.2em;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    font-size:1.2em;
    margin-right:0.2em;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    color:#06207d;
}

#secondary-navbar nav .nav-wrapper ul li
{
    width:33%;  
}
#secondary-navbar nav .nav-wrapper ul li:nth-child(3)
{

    width:34%;
}

Вот jsfiddle, я пытался использовать встроенный блок для значка, но затем навигационная панель получает высоту более 56 пикселей... https://jsfiddle.net/4aednm5d/

Есть ли у вас какие-либо идеи о том, как решить эту проблему?


material-design html css materialize
person cnexans    schedule 25.10.2015    source источник
comment
...и где ваши значки в демо (помимо того, что вы используете icon_class_name как текст <i>?)   -  person Roko C. Buljan    schedule 25.10.2015
comment
Да, я использовал ‹i class=material-icons›...‹/i›, как сказано в документации.   -  person cnexans    schedule 25.10.2015

Ответы (5)


arrow_upward
12
arrow_downward

Я обычно использую это:

.icon-align {
       vertical-align: text-bottom;
    }
<i class="material-icons md-18 icon align">check_circle</i>Auto Accepted</div>`
person dessertcook    schedule 14.03.2017

arrow_upward
3
arrow_downward

Использовать

text-align: center;

для выравнивания текста и значков по центру родителя.

person Florin Pop    schedule 25.10.2015
comment
Я сделал так (это первый ‹li› в jsfiddle), но тогда ‹li› занимает 59 пикселей, а текст и значки не выровнены по вертикали... - person cnexans; 25.10.2015

arrow_upward
3
arrow_downward

Когда я изменил размер mat-icon в кнопке, ее вертикальное выравнивание ухудшилось, тогда я добавил vertical-align: -webkit-baseline-middle; к mat-icon и получил фактически требуемый результат.

Вот как я это улучшил...

<button color="primary" mat-raised-button>
    <mat-icon>edit</mat-icon>
    Edit Profile
</button>

// CSS
mat-icon {
   font-size: 16px;
}

В результате я получил несовпадение icon и text

введите здесь описание изображения

затем я добавил vertical-align: -webkit-baseline-middle;

mat-icon {
   font-size: 16px;
   vertical-align: middle;
}

и получил нужный результат

введите здесь описание изображения

person WasiF    schedule 13.05.2019

arrow_upward
1
arrow_downward

перепробовав много вещей, я нашел решение. Всем спасибо, вы мне очень помогли.

Я надеюсь, что решение полезно для другого, вы все были правы: способ центрирования значков в виде текста — это text-align: center, но для решения вертикального выравнивания используется span.material-icons и дать ему относительное положение, поэтому мы можем использовать, например, top:3px.

Ну вот соответствующий код.

<div class="navbar-fixed" id="secondary-navbar">
    <nav>
        <div class="nav-wrapper">
            <ul>
                <li>
                    <a href="#!">
                        <span class="material-icons">event</span>
                        <span class="nav-text">Calendario</span>
                    </a>
                </li>
                <li>
                    <a href="#!">
                        <span class="material-icons">location_on</span>
                        <span class="nav-text">Mapa</span>
                    </a>
                </li>
                <li>
                    <a href="#!">
                        <span class="material-icons">apps</span>
                        <span class="nav-text">Galería</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>

CSS

#secondary-navbar nav
{
    background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a .nav-text
{
    font-size:1.2em;
    position:relative;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    font-size:1.2em;
    margin-right:0.2em;
    position:relative; /* this line and the next "do the thing" */
    top:3px;
}
#secondary-navbar nav .nav-wrapper ul li a
{
    text-align:center; /* this center the text, obv */
    height:56px;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    color:#06207d;
}

#secondary-navbar nav .nav-wrapper ul li
{
    width:33%;  
}
#secondary-navbar nav .nav-wrapper ul li:nth-child(3)
{

    width:34%;
}

Мои наилучшие пожелания

person cnexans    schedule 25.10.2015

arrow_upward
0
arrow_downward

Просто используйте

.material-icons{
  line-height:59px;
}

Это работает https://jsfiddle.net/morfeibox/txs411yk/3/

person Atanas Beychev    schedule 11.04.2018