如何僅在特定HTML元素之後纔在CSS中居中？

Question

我想在最近的li中移動到新行並僅居中a。我試過的每件事情都改變了以前的主播。我無法觸及標記，只有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> 

和糾正我，如果我誤解你的問題