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

#css

Здравствуйте. Я делаю сайт и не могу понять, как можно центрировать элементы 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;
}

  
Главное меню
  
Форум
  
Мобильная связь




    

Ответы

Ответ 1

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

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

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


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

P.S. Вроде бы можно так центрировать и в блоках с absolute или fixed.


Ответ 2

Центрировать можно с помощью: 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;
    }

  
Главное меню
  
Форум
  
Мобильная связь



Ответ 3

Решение на display: flex:



.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);
}

Главное меню
Форум
Мобильная связь



Ответ 4

Решение через display: inline-block;:



.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;
}

  
Главное меню
  
Форум
  
Мобильная связь



Ответ 5

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



* {
  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;
}

  
Главное меню
  
  
Форум
  
  
Мобильная связь
  





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


Ответ 6

.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; /* Центрируем по вертикале */
}

  
Главное меню
  
Форум
  
Мобильная связь



Ответ 7

1. Решение через Flexbox



.container-fluid {
  height: 400px;
  background-color: lightgreen;
  
  display: flex;
  /* Центрируем по вертикали */
  align-items: center;
  /* Центрируем по горизонтали */
  justify-content: center;
}



  

    

      

        
        
Some Button
      
    
  





2. Решение через псевдоэлемент с поддержкой IE 9



.container-fluid {
  height: 400px;
  background-color: lightgreen;
  overflow: hidden;
  position: relative;
  text-align: center;
}

/* Обертка */
.container-fluid:before {
   content: '';
   height: 100%;
   display: inline-block !important;
   vertical-align: middle;
}

/* Блок, который нужно выровнять */
.row {
   display: inline-block;
   vertical-align: middle;
}


  

    

      

        
        
Some Button
      
    
  





3. Решение через абсолютное позиционирование



.container-fluid {
  height: 400px;
  background-color: lightgreen;
  overflow: hidden;
  position: relative;
}

.row{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


  

    

      

        
        
Some Button
      
    
  
    





4. Решение через line-height



.container-fluid {
  height: 400px;
  background-color: lightgreen;
  overflow: hidden;
  position: relative;
}

.row{
  line-height: 400px;
}


  

    

      

        
        
Some Button