Wie zentriert man in CSS nur nach bestimmten HTML-Elementen?

Question

Ich würde gerne in neue Zeile verschieben und nur a in letzte li verschieben. Alles, was ich versuchte, änderte auch frühere Anker. Ich kann Markup nicht berühren, nur CSS. Jeder gut in CSS wissen, wie man nur die letzte a Ziel?

Der Code ist:

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

Ok, Antwort war einfach, alles, was ich tun musste, war eine Pseudo-Klasse hinzuzufügen.

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

Eine Möglichkeit, es tun könnte, enthalten alle Sachen, die man in einem div zentriert werden sollen.

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

Und die CSS:

div.centered{ 
    text-align: center; 
} 

Answer 3

Sie könnten mehr <div>-Tags in Ihrem Haupt <div> Tag ein wenig wie folgt hinzufügen.

<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> 

und mich korrigieren, wenn ich Ihre Frage falsch verstanden