Нужно центрировать блок a внутри div

340

05 января 2017, 07:06

Здравствуйте. Я делаю сайт и не могу понять, как можно центрировать элементы a внутри div. Подскажите. Заранее спасибо.

Код:

.hmenu { 
  margin-left:8%; 
  width:1200px; 
  background-color:#119EDA; 
  height:110px; 
  } 
 
.ar  { 
  background-color:#119EDA; 
  float:left; 
  width:200px;  
  height:44px; 
  background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); 
  background-size: 100% 100%; 
  background-repeat:no-repeat; 
  top:20px; 
} 
 
a { 
  text-decoration:none; 
  color:#FFFFFF; 
  margin-top:10px; 
  font-family:verdana; 
  font-size:14px; 
}

<div class="hmenu"> 
  <div class="ar"><a href="">Главное меню</a></div> 
  <div class="ar"><a href="">Форум</a></div> 
  <div class="ar"><a href="">Мобильная связь</a></div> 
</div>

Answer 1

.hmenu { 
  margin-left:8%; 
  width:1200px; 
  background-color:#119EDA; 
  height:110px; 
  } 
 
.ar  { 
  background-color:#119EDA; 
  float:left; 
  width:200px;  
  height:44px; 
  background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); 
  background-size: 100% 100%; 
  background-repeat:no-repeat; 
  top:20px; 
  text-align: center; /* Центрируем по горизонтале */ 
} 
 
a { 
  text-decoration:none; 
  color:#FFFFFF; 
  margin-top:10px; 
  font-family:verdana; 
  font-size:14px; 
  line-height: 44px; /* Центрируем по вертикале */ 
}

<div class="hmenu"> 
  <div class="ar"><a href="">Главное меню</a></div> 
  <div class="ar"><a href="">Форум</a></div> 
  <div class="ar"><a href="">Мобильная связь</a></div> 
</div>

Answer 2

Для родительского div'a ставите position:relative.

И к элементу, который нужно отцентрировать внутри него применяете следующий стиль:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Таким образом можно центрировать все внутри контейнеров с position:relative.

p.s. Вроде бы можно так центрировать и в блоках с position:absolute|fixed

Answer 3

Центрировать можно с помощью: line-height, отступов, таблиц, transform, псевдоэлемента, flexbox, внутри элемента button.

Пример с псевдоэлементом - https://jsfiddle.net/fdwqdkya/

.hmenu { 
      margin-left:8%; 
      width:1200px; 
      background-color:#119EDA; 
      height:110px; 
      } 
 
    .ar  { 
      background-color:#119EDA; 
      float:left; 
      width:200px;  
      height:44px; 
      background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); 
      background-size: 100% 100%; 
      background-repeat:no-repeat; 
      top:20px; 
      display: table; 
      text-align: center; 
    } 
 
    a { 
      display: table-cell; 
      vertical-align: middle; 
      text-decoration:none; 
      color:#FFFFFF; 
      margin-top:10px; 
      font-family:verdana; 
      font-size:14px; 
    }

<div class="hmenu"> 
  <div class="ar"><a href="">Главное меню</a></div> 
  <div class="ar"><a href="">Форум</a></div> 
  <div class="ar"><a href="">Мобильная связь</a></div> 
</div>

Answer 4

Используем CSS для всех блоков text-align:center и line-height:;

* { 
  margin: 0; 
  padding: 0; 
} 
.hmenu { 
  width: 100%; 
  background-color: #119EDA; 
  height: 110px; 
  line-height: 110px; 
  text-align: center; 
} 
.ar { 
  background-color: #119EDA; 
  display: inline-block; 
  width: 200px; 
  line-height: 44px; 
  text-align: center; 
  height: 44px; 
  background: linear-gradient(rgb(10, 1, 255), rgb(8, 38, 119)); 
  background-size: 100% 100%; 
  background-repeat: no-repeat; 
  border-radius: 10pt; 
} 
a { 
  text-decoration: none; 
  color: #FFFFFF; 
  margin-top: 10px; 
  font-family: verdana; 
  font-size: 14px; 
}

<div class="hmenu"> 
  <div class="ar"><a href="">Главное меню</a> 
  </div> 
  <div class="ar"><a href="">Форум</a> 
  </div> 
  <div class="ar"><a href="">Мобильная связь</a> 
  </div> 
</div>

После чего получаем такую конструкцию :

Answer 5

.ar { 
  display: inline-block; 
  padding: 10px 10px 10px 10px; 
  background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); 
  background-size: 100% 100%; 
  background-repeat:no-repeat; 
  min-width: 100px; 
} 
 
.hmenu { 
  text-align: center; 
} 
 
a { 
  color:white; 
  text-decoration: none; 
  font-family:verdana; 
  font-size:14px; 
} 
 
body { 
  background-color: #129EDB; 
}

<div class="hmenu"> 
  <div class="ar"><a href="">Главное меню</a></div> 
  <div class="ar"><a href="">Форум</a></div> 
  <div class="ar"><a href="">Мобильная связь</a></div> 
</div>

Answer 6

.hmenu { 
background-color:#119EDA; 
display: flex; 
justify-content: center; 
} 
 
.hmenu a { 
text-decoration: none; 
color: white; 
font: 1em sans-serif; 
border-radius: 2em; 
margin: 1em 0.3em; 
padding: .5em 1em; 
background: linear-gradient(to bottom, hsl(207, 85%, 57%) 15%, hsla(206, 93%, 33%, 1)); 
box-shadow: inset 0 -0.01em 0.2em 0.03em hsl(197, 57%, 67%), 
            inset 0 0 1em hsla(207, 85%, 44%, 0.3), 
            0 0.1em 0.3em -0.05em rgba(0, 0, 0, 0.54); 
}

<nav class="hmenu"> 
<a href="">Главное меню</a> 
<a href="">Форум</a> 
<a href="">Мобильная связь</a> 
</nav>

Answer 7

Добавьте .ar вот такое свойство:

.ar {
  text-align: center;
}

Как новичку, советую вам посетить http://htmlbook.ru

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Материалы по css хакам

Посоветуйте что-нибудь почитать хорошее по cssМой уровень: читал книжки, смотрел курсы, сверстал макетов 10 по psd, всё это было в основном до выхода...

332

CSS