CODEWITHSUNDEEP
htmlcss
AndreaNobili
AndreaNobili

Reputation: 42957

Why does this span tag not use the CSS class I have specified?

I have a CSS problem with this custom theme on which I am working: http://www.asper-eritrea.com/

At the beginning of the website (under the header slideshow) there are the following text lines:

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

These line are shown by the following 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 -->

And this is the CSS code related to the used class:

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

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

I have also set these classes on the third line (COORDINAMENTO ERITREA DEMOCRATICA), but it seems it doesn't see it, and the text is not at center.

What am I missing?

Upvotes: 0

Views: 172

Answers (3)

misterManSam
misterManSam

Reputation: 24692

As has already been stated, a <span> is display: inline by default and text-align will have no affect on an inline element.

Instead of using a <span>, why not use a more suitable element such as <h3>. Heading elements also happen to be display: block by default, so that also fixes your issue. Spans or divs are semantically meaningless, whereas <h1> - <h2> - <h3> indicate a heading and sub-headings, which these seem to be.

HTML / CSS - Note <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 -->

Upvotes: 0

Criban
Criban

Reputation: 146

the span is an inline element.

Two ways:

  1. Make the span to a div

  2. give the outer div the class text-center

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

Upvotes: 2

Anon
Anon

Reputation: 2874

<span> is inline element and property margin, text-align etc. not work. You must change tag to <div> with class leadTitle or add in your css file this row

span.leadTitle{display:block;}

Upvotes: 2

Related Questions