Как центрировать графические ссылки в одной строке?

0

Моя цель - выровнять три ссылки на одной и той же линии и центрировать их. Я думал, что это был способ сделать это, но он не работает. Что я делаю не так?

CSS

.links_wrapper {
    margin:auto;
}
.home_links {
    float: left;
}

HTML-код

<div class="links_wrapper">
    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>

    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>

    <div class="home_links">
        <a href="#"><img src="#"/></a>
    </div>
</div>
  • 0
    дайте им ширину 33% и убедитесь, что вы нормализуете CSS (или просто поместите это: *, *:before, *:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } )
  • 0
    Не пропущена ли строка вашего HTML? Не могли бы вы добавить это.
Показать ещё 1 комментарий
Теги:
hyperlink
image
center

3 ответа

1
Лучший ответ
*, 
*:before, 
*:after { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
}
.home_links {
    max-width: 33%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
}

Не стесняйтесь изменять поля n материала по мере необходимости.

  • 0
    Это сделал это! Спасибо!!
  • 0
    Всегда рад помочь
0

Ну вот:

http://jsfiddle.net/99u6C/1/

HTML

<div class="links_wrapper">
    <div class="home_links"> <a href="#"><img src="#"/></a>

    </div>
    <div class="home_links"> <a href="#"><img src="#"/></a>

    </div>
    <div class="home_links"> <a href="#"><img src="#"/></a>

    </div>
</div>

CSS

.links_wrapper {
    margin:auto;
    text-align:center;
}
.home_links {
    display:inline-block;
}
0

Это потому, что они оба находятся в отдельном div с float:left; , Помещение их в один <div class="home_links"> должно работать после float:left; удален.

Если вы хотите, чтобы расстояние было равным между звеньями, установите процент ширины, равный 1/numberOfLinks чтобы решить, чтобы div соответствовала ширине. В этом случае float:left; должен оставаться.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню