Выравнивание блока по центру

@Newibe · Регистрация: 02.04.2016

Author24 — интернет-сервис помощи студентам

Доброго времени суток
Есть макет. В нем 3 ссылки"Статьи", "Опросы" и "События". Можно ли с помощью какого-либо свойства (без подсчета расстояния в пикселях и через установку их в маргине) как-нибудь сделать так, чтобы сслыка "События" расположилась ровно по центру дива, в который завернуты все три ссылки, или между соседними дивами "Статьи" и "Опросы"?

@Kenworth · 30.09.2016, 22:03

flex свойства http://html5book.ru/css3-flexbox/#justify-content

Добавлено через 14 минут

HTML5

<container>
  <nav>
    <ul>
      <li>
        <a href=""> Link 1</a>
      </li>
      <li>
        <a href=""> Link 2</a>
      </li>
      <li>
        <a href=""> Link 3</a>
      </li>
    </ul>
  </nav>
</container>

CSS

nav ul{
  display: flex;
  justify-content: space-around;
}

@boilzzz · 30.09.2016, 22:18

Newibe, Вы так имеете в виду?
песочница

CSS

.wrap div{
  display:inline-block;
  width:30%;
}
.wrap{
  text-align:center
}
.link1{
  text-align: left;
}
.link3{
  text-align: right;
}

HTML5

<div class="wrap">
  <div class="link1">Статьи</div>
  <div class="link2">События</div>
  <div class="link3">Опросы</div>
</div>

@Newibe · 01.10.2016, 18:43 **[ТС]**

Почему-то у меня не ровно. Вот код:

HTML5

<div class="menu"> 
            <div id="left" align="center">СТАТЬИ</div>
            <div id="center" align="center">СОБЫТИЯ</div>    
            <div id="right" align="center">ОПРОСЫ</div>
        </div>

Стили:

CSS

.menu {
    background-color: black;
    height: 20px;
}
 
.menu div {
    height: 20px;
    display: inline-block;
}
 
#left {
    background-color: black;
    color: antiquewhite;
    float: left;
    width: 200px;
    margin-left: 200px;
    text-align: center;
}
 
#center {
    background-color: black;
    color: antiquewhite;
    width: 200px;
/*    position: absolute;*/
    text-align: center;
}
 
#right {
    background-color: black;
    color: antiquewhite;
    float: right;
    width: 200px;
    margin-right: 200px;
    text-align: center;
}

Что не так?

@mrtoxas · 01.10.2016, 19:11

CSS

.menu {
  background-color: black;
  height: 20px;
  text-align: center;
}
 
.item {
  color: #fff;
  display: inline-block;
  width: 200px;
  text-align: center;
}

HTML5

<div class="menu">
  <div class="item">СТАТЬИ</div>
  <div class="item">СОБЫТИЯ</div>
  <div class="item">ОПРОСЫ</div>
</div>

@Newibe · 03.10.2016, 17:17 **[ТС]**

Все равно нет. Все тоже самое.

HTML5

<div id="header"></div>
        <div class="menu"> 
            <div class="item" id="left">СТАТЬИ</div>
            <div class="item" id="center">СОБЫТИЯ</div>    
            <div class="item" id="right">ОПРОСЫ</div>
        </div>

CSS

.menu {
    background-color: black;
    height: 20px;
}
 
 
.menu div {
    height: 20px;
    display: inline-block;
}
 
 
.item {
    display: inline-block;
    width: 200px;
    text-align: center;
}
 
#left {
    background-color: black;
    color: antiquewhite;
    float: left;
    margin-left: 200px;
}
 
#center {
    background-color: black;
    color: antiquewhite;
    position: absolute;
}
 
#right {
    background-color: black;
    color: antiquewhite;
    float: right;
    margin-right: 200px;
}

@mrtoxas · 03.10.2016, 17:31

Вот зачем вам тут отвечают, если вы все лепите свой код? Вот пример, приведенный мной выше, в песочнице. Он не подходит?
Зачем вам margin-left:200px? Зачем вам ID?

@Kenworth · 03.10.2016, 17:59

А все по тому, что у центрального элемента стоит абсолютное позиционирование. Еще раз повторюсь - используй flex.
В примере привожу твой код по сравнению с моим:

Дабы не перебивать стили и классы - дописал индекс "2"

HTML5

<p>Код с отзыва</p>
<div id="header"></div>
<div class="menu"> 
  <div class="item" id="left">СТАТЬИ</div>
  <div class="item" id="center">СОБЫТИЯ</div>    
  <div class="item" id="right">ОПРОСЫ</div>
</div>
 
 
<br>
<br>
 
 
<p>Новый код</p>
<div id="header"></div>
<div class="menu2"> 
  <div class="item2" id="left2">статьи</div>
  <div class="item2" id="center2">события</div>    
  <div class="item2" id="right2">опросы</div>
</div>

CSS

.menu {
    background-color: black;
    height: 20px;
}
 
.menu div {
    height: 20px;
    display: inline-block;
}
.item {
    display: inline-block;
    width: 200px;
    text-align: center;
}
#left {
    background-color: black;
    color: antiquewhite;
    float: left;
    margin-left: 200px;
}
#center {
    background-color: black;
    color: antiquewhite;
    position: absolute;
        left: 50%;                    /* то, что нужно было дописать*/
        transform: translateX(-50%);  /* то, что нужно было дописать*/
}
#right {
    background-color: black;
    color: antiquewhite;
    float: right;
    margin-right: 200px;
}
 
 
 
 
/*  Начало новых стилей */
.menu2{
  background-color: black;
  display: flex;
  justify-content: space-around;
}
 
.menu2 .item2{
   color: antiquewhite;
   line-height: 20px;
   text-transform: uppercase;
   width: 200px;
   text-align: center;
}

результат

@mrtoxas · 03.10.2016, 18:02

Не по теме:

Kenworth, использовать flex, чтобы выровнять три элемента по центру?

@Newibe · 04.10.2016, 08:54 **[ТС]**

Спасибо, заработало. я свой код леплю, потому что мне нужно не готовое решение, а его интеграция в рамках моего кода.

Добавлено через 8 минут
Ваши оба варианта тоже сработали. Вот только мне не понятно что это делает:

CSS

1 2	left: 50%; transform: translateX(-50%);

я так понимаю, что вторая строчка смещает элемент по оси Х на 50%, но не понятно:
1) относительно чего? т.е. откуда идет отсчет
2) что делает первая строчка? устанавливает точку отсчета?

@Newibe 5 / 11 / 4 Регистрация: 02.04.2016 Сообщений: 351
		1
	Выравнивание блока по центру 30.09.2016, 21:45. Показов 1014. Ответов 9 Метки нет (Все метки) Доброго времени суток Есть макет. В нем 3 ссылки"Статьи", "Опросы" и "События". Можно ли с помощью какого-либо свойства (без подсчета расстояния в пикселях и через установку их в маргине) как-нибудь сделать так, чтобы сслыка "События" расположилась ровно по центру дива, в который завернуты все три ссылки, или между соседними дивами "Статьи" и "Опросы"? Миниатюры 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	03.10.2016, 17:31	7
	Вот зачем вам тут отвечают, если вы все лепите свой код? Вот пример, приведенный мной выше, в песочнице. Он не подходит? Зачем вам margin-left:200px? Зачем вам ID? 1

@mrtoxas
	03.10.2016, 18:02 #9
	Не по теме: Kenworth, использовать flex, чтобы выровнять три элемента по центру? 0