html - 带类的中心元素

Question

我有以下问题，tripadviser 元素不在 div 内居中：

HTML

<div class="box">
   <div class="center">
      <div id="TA_rated652" class="TA_rated">
         <ul id="aZ2UznGh" class="TA_links ztx26p">
            <li id="FyjgLOVkx" class="tmeRQwSrMol"><a href="http://www.tripadvisor.de/Attraction_Review-g293918-d1942956-Reviews-The_Dive_Academy-Koh_Samui_Surat_Thani_Province.html" class="center">The Dive Academy</a></li>
         </ul>
      </div>
      <script src="http://www.jscache.com/wejs?wtype=rated&amp;uniq=652&amp;locationId=1942956&amp;lang=de"></script>
   </div>
</div>

CSS

.block05 .center { 
    display:block;
    margin-left:auto;
    text-align:center;
 }

如何使我的tripadvisor 元素居中？

Answer 1

默认情况下，元素的宽度为 100%，因此您无法将其居中。

你可以简单地设置一个width来.box解决这个问题。

.box {
    margin: 0px auto;
    width: 170px;
}

jsFiddle 演示

Answer 2

我在您的 HTML 中没有看到 .block05 。

当使用 text-align 时，要在 div 中居中 div 不是一个选项，您可以在 div 上设置显式宽度并设置 margin:0 auto;

.element{
    width:300px;
    margin:0 auto;
}

这将使元素在其容器元素的范围内居中。