Как центрировать в CSS только после определенного элемента HTML?

Question

Хотелось бы перейти на новую линию и центр только a в последних li. Все, что я пробовал, менялось и на предыдущие привязки. Я не могу касаться разметки, только CSS. Кто-нибудь хороший в CSS знает, как настроить таргетинг только на последний a?

Код:

ol{ 
 
    list-style:none; 
 
    font-family:sans-serif; 
 
} 
 
ol li{ 
 
    padding:5px; 
 
    margin:1px; 
 
    background:#e6e6fa; 
 
} 
 
.classX{ 
 
    text-align:center; 
 
} 
 
.classX a{ 
 
    display: inline-block; 
 
    padding:.3em .5em; 
 
    margin:0 auto; 
 
    color:#000; 
 
    background:#fff; 
 
    border:1px solid #000; 
 
} 
 
time, 
 
time + p{ 
 
    display:inline-block; 
 
    font-size:.8em; 
 
} 
 
span + a{ 
 
    display: inline-block; 
 
    padding:.3em .5em; 
 
    color:#000; 
 
    background:#fff; 
 
    border:1px solid #000; 
 
}

<section> 
 
    <ol> 
 
    <li><!-- This link contain 'a' in first 'p' --> 
 
     <h3>Heading</h3> 
 
     <img src="http://placehold.it/350x150" /> 
 
     <p>Primary description with 
 
     <a href="finally-styled.html">link</a> 
 
     inside</p> 
 
    </li> 
 
    <li class="classX"><!-- The most imptnt here is to center 'a' --> 
 
     <h3>Heading</h3> 
 
     <img src="http://placehold.it/350x150" /> 
 
     <p>Some related content, is centered.</p> 
 
     <a href="one.html">One</a> 
 
     <a href="second.html">Two</a> 
 
    </li> 
 
    <li><!-- The most imptnt here is to center 'a' --> 
 
     <h3>Heading</h3> 
 
     <img src="http://placehold.it/350x150" /> 
 
     <p>Primary description.</p> 
 
     <time>2038-01-19</time> 
 
     <p>Category</p> 
 
     <span><!-- Invisible element, yeah I know. But might help to target the 'a'. --></span> 
 
     <a href="this-1-should-be-centered.html">Link</a> 
 
    </li> 
 
    </ol> 
 
</section>

Answer 1

Хорошо, ответ был прост, все, что я должен был сделать, чтобы добавить один псевдо-класса.

ol{ 
 
    list-style:none; 
 
    font-family:sans-serif; 
 
} 
 
ol li{ 
 
    padding:5px; 
 
    margin:1px; 
 
    background:#e6e6fa; 
 
} 
 
.classX{ 
 
    text-align:center; 
 
} 
 
.classX a{ 
 
    display: inline-block; 
 
    padding:.3em .5em; 
 
    margin:0 auto; 
 
    color:#000; 
 
    background:#fff; 
 
    border:1px solid #000; 
 
} 
 
time, 
 
time + p{ 
 
    display:inline-block; 
 
    font-size:.8em; 
 
} 
 
span + a{ 
 
    display: inline-block; 
 
    padding:.3em .5em; 
 
    color:#000; 
 
    background:#fff; 
 
    border:1px solid #000; 
 
} 
 
ol li:nth-last-of-type(1) a{ 
 
\t display:block; 
 
\t max-width:3em; 
 
\t margin:0 auto; 
 
\t text-align:center; 
 
}

<section> 
 
    <ol> 
 
    <li><!-- This link contain 'a' in first 'p' --> 
 
     <h3>Heading</h3> 
 
     <img src="http://placehold.it/350x150" /> 
 
     <p>Primary description with 
 
     <a href="finally-styled.html">link</a> 
 
     inside</p> 
 
    </li> 
 
    <li class="classX"><!-- The most imptnt here is to center 'a' --> 
 
     <h3>Heading</h3> 
 
     <img src="http://placehold.it/350x150" /> 
 
     <p>Some related content, is centered.</p> 
 
     <a href="one.html">One</a> 
 
     <a href="second.html">Two</a> 
 
    </li> 
 
    <li><!-- The most imptnt here is to center 'a' --> 
 
     <h3>Heading</h3> 
 
     <img src="http://placehold.it/350x150" /> 
 
     <p>Primary description.</p> 
 
     <time>2038-01-19</time> 
 
     <p>Category</p> 
 
     <span><!-- Invisible element, yeah I know. But might help to target the 'a'. --></span> 
 
     <a href="this-1-should-be-centered.html">Link</a> 
 
    </li> 
 
    </ol> 
 
</section>

Answer 2

Одним из способов вы можете сделать это, содержат все вещи, которые вы хотите центрированный в DIV.

//Beginning of the page here 
<a></a> 
<div class="centered"> 
    //Rest of the page's content here 
</div> 

И CSS:

div.centered{ 
    text-align: center; 
} 

Answer 3

Вы можете добавить больше <div> тегов внутри основного <div> тега несколько как следующее.

<div> 
<div style="text-align:left;"> 
this text is left aligned 
</div> 
<a href="#">this is link</a> 
<div style="text-align:center">This text is center aligned</div> 
</div> 

и поправьте меня, если я неправильно понял ваш вопрос