Центр текстовой ссылки

Question

Я пытаюсь центрировать текстовую ссылку, однако она не отвечает на text-align: center;

Любые мысли? Я знаю, что это overthinking ..

HTML:

<div class="container"> 
    <div class="promotion-left">&nbsp; 
    </div> 
    <div class="promotion-right"> 
     <h2 class="instructions-head">INSTRUCTIONS</h2> 
     <ol class="instructions-list"> 
     <li class="instructions-item">INSTRUCTIONS 1</li> 
     <li class="instructions-item">INSTRUCTIONS 2</li> 
     <li class="instructions-item">INSTRUCTIONS 3</li> 
     </ol> 
     <a href="#" class="promotion-btn">Download</a> 
    </div> 
    </div> 

CSS:

.promotion-left { 
    background: white; 
    display: inline-block; 
    width: 15%; 
} 
.promotion-right { 
    background: #eaf8fe; 
    display: inline-block; 
    width: 80%; 
} 
a.promotion-btn { 
    background: red; 
    display: inline-block; 
    text-align: center; 
    text-decoration: none; 
    border-radius: 2px; 
    padding: 8px 16px; 
} 

JSFIDDLE

Answer 1

Одним из вариантов является сделать a блок элемента с фиксированной шириной и auto Поля:

a.promotion-btn { 
    /* other styles */ 
    display: block; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Другой поставить a внутри DIV с text-align: center:

<div class="center"> 
    <a href="#" class="promotion-btn">Download</a> 
</div> 

и

.center { 
    text-align: center; 
} 

Answer 2

Давайте попробуем иметь в виду, что элемент "ДИВ" есть. Это подразделение или фрагмент вашего HTML-документа. Когда я пишу веб-сайты, я признаю, что я схожу с ума и убеждаюсь, что все организовано как можно больше кусков.

http://jsfiddle.net/1ph1wvp8/1/

<div class="container"> 
<div class="promotion-left">&nbsp;</div> 
<div class="promotion-right"> 
    <div class="Promotion Head"> 
     <h2 class="instructions-head">INSTRUCTIONS</h2> 

    </div> 
    <div class="PromotionL ist"> 
     <ol class="instructions-list"> 
      <li class="instructions-item">INSTRUCTIONS 1</li> 
      <li class="instructions-item">INSTRUCTIONS 2</li> 
      <li class="instructions-item">INSTRUCTIONS 3</li> 
     </ol> 
    </div> 
    <div class="Promotion Download"> <a href="#" class="promotion-btn">Download</a> 

    </div> 
</div> 
</div> 

Обратите внимание, я добавил дивы вокруг каждой части продвижения по службе. Тогда я обновил CSS следующим образом:

.promotion-left { 
background: white; 
float:left; 
width: 15%; 
} 
.promotion-right { 
background: #eaf8fe; 
float:left; 
width: 80%; 
} 
a.promotion-btn { 
background: red; 
text-decoration: none; 
border-radius: 2px; 
padding: 8px 16px; 
margin:auto; 
} 
.Download { 
text-align:center; 
} 
.Promotion { 
width:30%; 
} 

установить ширину класса акции до 30% держать кнопку под списком, в противном случае он сосредоточен на фоне, который выглядит напуганным мне (удалить 30 %, чтобы убедиться сами).