Моя цель - выровнять три ссылки на одной и той же линии и центрировать их. Я думал, что это был способ сделать это, но он не работает. Что я делаю не так?
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>
*,
*: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 материала по мере необходимости.
Ну вот:
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;
}
Это потому, что они оба находятся в отдельном div
с float:left;
, Помещение их в один <div class="home_links">
должно работать после float:left;
удален.
Если вы хотите, чтобы расстояние было равным между звеньями, установите процент ширины, равный 1/numberOfLinks
чтобы решить, чтобы div
соответствовала ширине. В этом случае float:left;
должен оставаться.
*, *:before, *:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
)