Как сделать кнопку по центру?

563

26 ноября 2016, 18:38

.section a { 
	color: white; 
	text-transform: uppercase; 
	text-decoration: none; 
	margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
 
} 
 
.button { 
	height: 50px; 
    position: relative; 
    border: 1px solid white; 
}

	<div class="section clearfix"> 
		<div class="title-text"> 
			<h2>We are specialist in</h2> 
			<h1>Responsive designs, Stationary<br> 
				And wordpress Themes</h1> 
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem                     Ipsum has been the industry's standard dummy text. 
                </p> 
				<div class="button"><a href="#">Button Name</a></div> 
			</div> 
		</div>

Как только делать кнопке display: inline-block; - то кнопка сразу прилипает к левому краю и никакие text-align: center; не помогают :(

Answer 1

Как один из вариантов:

.section a { 
	color: white; 
	text-transform: uppercase; 
	text-decoration: none; 
} 
 
.title-text { 
  text-align: center; 
} 
 
.button { 
    display: inline-block; 
	height: 50px; 
    line-height: 50px; 
    position: relative; 
    border: 1px solid white; 
    padding: 0 1rem; 
} 
 
body { 
  background: #ccc; 
}

<div class="section clearfix"> 
  <div class="title-text"> 
    <h2>We are specialist in</h2> 
    <h1>Responsive designs, Stationary<br> 
      And wordpress Themes</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem                     Ipsum has been the industry's standard dummy text. 
    </p> 
    <div class="button"><a href="#">Button Name</a></div> 
  </div> 
</div>

Answer 2

Используйте css хаки)

.button{
   height: 50px;
   display:block;
   position: relative;
   border: 1px solid white;
   margin:0 auto; // отцентрирует блок по центру родительского элемента
        }

Answer 3

inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block. Ибо ему просто некуда двигаться. Размеры-то одинаковые.

Если div шире своего содержимого, то text-align работает.
Но Ваш кнопочный div, когда он нормальный block, растягивается по длине на всю ширину страницы. Поэтому кнопка выравнивается относительно страницы и уезжает правее относительно центра текста.

Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block. Он не будет шире текста (предполагаем текст шире кнопки), кнопочный div таким образом тоже по ширине будет как текст, и кнопка теперь выравнивается относительно текста.

.section > div { 
  display: inline-block; 
} 
 
.button { 
  text-align: center; 
} 
 
.button > a { 
  color: #39739d; 
  background-color: #E1ECF4; 
  border: 1px solid #96bdd9;  
  padding: 5px;  
  border-radius: 5px; 
  box-shadow: inset 0 1px 0 #f4f8fb; 
  text-decoration: none; 
} 
 
.button > a:hover { 
  background-color: #bcd4e6; 
}

<div class="section"> 
  <div> 
    <h2>We are specialist in</h2> 
    <h1>Responsive designs, Stationary<br>And wordpress Themes</h1> 
    <p> 
      Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem                     Ipsum has been the industry's standard dummy text. 
    </p> 
    <div class="button"> 
      <a href="#">Button Name</a> 
    </div> 
  </div> 
</div>

Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.