特定のHTML要素の後にのみCSSの中心を置く方法は？

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

[OK]を、その答えは私がしなければならなかったすべては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>タグ内より<div>のタグを追加することができ

div.centered{ 
    text-align: center; 
} 

Answer 3

。

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

と私を修正して、私はあなたの質問を誤解している場合