Почему пункт списка «уезжает»?

Question

[Гриша Никольский]

Здравствуйте. Делаю меню на сайте. Каждый пункт меню - круг с иконкой. Круг я делаю средствами css, а иконки добавляю в <div> пункта меню. Прилагаю кусочки кода и результат:

Круг с иконкой уезжает вниз.

HTML:

<div class="main_menu">
<ul>
        <li>
            <div class="circle">
                <img class="home_icon" src="<?php echo bloginfo('template_url'); ?>/pictures/home_icon.png" alt="Picture ERROR">
            </div>
        </li>
<ul>
</div>

CSS:

.circle {
    width: 150px;
    height: 150px;
    background: #f8f991;
    border-radius: 75px;
}

.main_menu {
    text-align: center;
}

.main_menu > ul {
    list-style-type: none;
}

.main_menu > ul > li {
    display: inline-block;
    padding: 30px;
}

.main_menu > ul > li > div > img {
    width: 65%;
    height: 65%;
    margin: 20px;
}

Как можно исправить это "съезжание"?
Буду искренне благодарен за ответ.
Заранее спасибо!

Answer 1

[Sanan Yuzb]

Добавляешь vertical-align:top в .main_menu > ul > li

Comments

[Гриша Никольский]

Спасибо огромное!

[Гриша Никольский]

А не подскажите, почему если я беру голый HTML файл, подключаю к нему CSS с правилом background-color: black; то фон отображается черный, а как только подключаю bootstrap - белый?

[Sanan Yuzb]

Потому,что в Bootstrap в body background-color задан белый и он переопределяет ваш стиль. Если хотите подключать и Боотстрап и свой стиль, то сперва подключаете Боотстрап, а потом свои стили.

[Гриша Никольский]

Sanan Yuzb: еще раз спасибо, тупанул :)

[Гриша Никольский]

Sanan Yuzb: Правда говоря, если вместо картинки в кружок запихнуть текст, то он не будет по центру отображаться, а кружок будет так же съезжать :(

[Sanan Yuzb]

Serj-One: Спасбо, не заметил))

[Sanan Yuzb]

Можете убрать класс circle, а сами пункты меню li делать кружками и добавлять тест, тогда все норм отображается

[Sanan Yuzb]

что-то такое https://jsfiddle.net/fhezybo3/6/

[Гриша Никольский]

Sanan Yuzb: так и с circle отображается, только текст отображается не по центру. А вверху. А нужно, чтобы по центру по вертикали и по горизонтали.

[Sanan Yuzb]

Гриша Никольский: https://jsfiddle.net/Sanan07/fhezybo3/7/

[Гриша Никольский]

Sanan Yuzb: все, спасибо большое! Очень выручили :)

[Sanan Yuzb]

Не за что))

Answer 2

[Павел]

надо бы весь код посмотреть. Залей на jsfidle

Comments

[Гриша Никольский]

Это весь код. В HTML только link есть еще.

[Кобальт Грозный]

Гриша Никольский: создайте на jsfiddle новый fiddle куда включите прям всё так, чтобы можно было дать ссылку и сразу увидеть проблему (уезжающий элемент)

[Гриша Никольский]

Кобальт Грозный: https://jsfiddle.net/fhezybo3/1/

[Павел]

(подсказка )повставляйте остальные картинки внутрь кружков . height: 65%; Сейчас работает только на первый блок там где есть картинка

[Гриша Никольский]

mrusklon: ну вставлю я. Будут они на одном уровне. Только в результате дальнейших JS манипуляций мне нужно будет убирать эти иконки и вместо них будет появляться текст. Поэтому мне в любом случае нужно сделать так, чтобы кружок без картинки и с картинкой были на одном уровне.