Question

我正在使用此自定义主题的CSS问题：http://www.asper-eritrea.com/

在网站的开头（标题幻灯片下），有以下文字行：

ASPER
Associazione per la Tutela dei Diritti Umani del Popolo Eritreo
COORDINAMENTO ERITREA DEMOCRATICA

这些行由以下HTML显示：

<section id="presentazione">
    <div class="row">
        <div class="col-sm-12">
            <!--<h1 class="text-center"><small>Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</small></h1>-->
            <!--<h1 class="text-center title">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1>-->
            <h1 class="text-center title">ASPER</h1>
            <h1 class="text-center leadTitle">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1> <!--<h1 class="text-center leadTitle">Association in Defense of the Human Rights of the Eritrean People</h1>-->
            <span class="text-center leadTitle"><a href="http://eritreademocratica.wordpress.com/" target="_blank">COORDINAMENTO ERITREA DEMOCRATICA</a></span>
        </div><!-- /.col-sm-12 -->
    </div><!-- /.row -->
</section><!-- /section presentazione -->

这是与使用过的类相关的CSS代码：

.text-center {
    text-align: center;
}

.leadTitle {
    font-size: 26px;
    font-weight: 200;
    line-height: 1.4;
    margin-bottom: 20px;
}

我还在第三行（COORDINAMENTO ERITREA DEMOCRATICA）设置了这些类，但它似乎没有看到它，并且文本不在中心。

我错过了什么？

Answer 1

<span>是内联元素和属性margin, text-align等不起作用。您必须使用类leadTitle将标记更改为<div>，或在此行中添加css文件

span.leadTitle{display:block;}

Answer 2

span是一个内联元素。

两种方式：

将跨度设为div
给外部div提供类文本中心

http://jsfiddle.net/s7729epu/

<section id="presentazione">
    <div class="row">
        <div class="col-sm-12 text-center">
            <h1 class="title">ASPER</h1>
            <h1 class="leadTitle">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1> 
            <span class="leadTitle"><a href="http://eritreademocratica.wordpress.com/" target="_blank">COORDINAMENTO ERITREA DEMOCRATICA</a></span>
        </div><!-- /.col-sm-12 -->
    </div><!-- /.row -->
</section><!-- /section presentazione -->

Answer 3

如前所述，<span>默认为display: inline，text-align对内联元素没有影响。

为什么不使用更合适的元素，例如<span>，而不是使用<h3>。标题元素默认情况下也恰好是display: block，因此也可以解决您的问题。跨度或div在语义上毫无意义，而<h1> - <h2> - <h3>表示标题和子标题，这些似乎是。

HTML / CSS - 注意<h1><h2><h3>

.text-center {
    text-align: center;
}

.leadTitle {
    font-size: 26px;
    font-weight: 200;
    line-height: 1.4;
    margin-bottom: 20px;
}

<section id="presentazione">
    <div class="row">
        <div class="col-sm-12">
            <!--<h1 class="text-center"><small>Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</small></h1>-->
            <!--<h1 class="text-center title">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1>-->
            <h1 class="text-center title">ASPER</h1>
            <h2 class="text-center leadTitle">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h2> <!--<h1 class="text-center leadTitle">Association in Defense of the Human Rights of the Eritrean People</h1>-->
            <h3 class="text-center leadTitle"><a href="http://eritreademocratica.wordpress.com/" target="_blank">COORDINAMENTO ERITREA DEMOCRATICA</a></h3>
        </div><!-- /.col-sm-12 -->
    </div><!-- /.row -->
</section><!-- /section presentazione -->

为什么这个span标签不使用我指定的CSS类？

3 个答案: