CSS: я не могу поместить кнопку в середину элемента DIV

Question

Я использую кнопки CSS из этого урока:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Мне нужно поместить кнопку в центр DIV, чтобы она была в центре.Но я не могу!

Вот код кнопки:

<a class="button" href="#"><span>Bring world peace</span></a>  

А вот CSS:

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 

Вот код, который я пытаюсь использовать:

<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>

Answer 1

атрибут align для элемента div устарел. Вам лучше определить класс для этого div, например:

<div class="centerize">
  <a class="button" href="#"><span>Bring world peace</span></a>
</div>

И CSS:

.centerize { 
    text-align: center;
}

Обратите внимание, что настройка выравнивания текста будет влиять только на содержимое внутри div. Сам div (должен быть) элементом блока, и в зависимости от того, где он находится в структуре документа, может не центрироваться сам.

Просто чтобы быть более уверенным, вы можете сделать что-то вроде этого:

.centerize {
    display: block;
    margin: 0 auto;
    text-align: center;
}

Теперь вы можете применять centerize к любому элементу, и этот элемент должен занимать всю ширину браузера и выравнивать его содержимое по центру.

Answer 2

Изменить класс кнопки для этих свойств:

.button{
  margin-left:50%;
  margin-right:50%;
  position: relative;
}

И оберните свою ссылку в div следующим образом:

<div align="center">
  <a class="button" href="#"><span>Bring world peace</span></a>  
</div>

Answer 3

a.button плавает влево.Вы можете попробовать float: none; на этом элементе.margin: 0 auto; также полезно для выравнивающих центр элементов.

Это помогает?