CODEWITHSUNDEEP
htmlcss
user2259723
user2259723

Reputation: 13

Why does the text in the span tags not center?

I am not exactly sure why the text does not center in the title class span.

<div id="vid_display">
 <span class="title">SampleText</span></br>
 <span class="desc">Sample Desc</span>
</div>

Stylesheet

#vid_display {
height: 500px;
width: 700px;
box-shadow: 10px 10px 5px #888;
}

.title {
font-family: cursive;
font-size: 20px;
font-style: bold;
text-align: center;
}

Upvotes: 0

Views: 101

Answers (3)

Darin Kolev
Darin Kolev

Reputation: 3411

is an inline element and not a block. Use div instead:

<div id="vid_display">
  <div class="title">SampleText</div><br>
  <span class="desc">Sample Desc</span>
</div>

Upvotes: 1

Nik Drosakis
Nik Drosakis

Reputation: 2348

Use 

 <div class="title">SampleText</div></br>

The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. <span> defaults to being display:inline; whereas <div> defaults to being display:block;.

Upvotes: 0

Dan
Dan

Reputation: 3870

text-align doesn't have any effect on inline elements like span tags. You need to apply your text-alignment onto the parent element that is display:block; like the <div> or <p> that is wrapping the span.

You might be better off with something like this:

HTML

<div id="vid_display">
 <p class="title">SampleText</p>
 <p class="desc">Sample Desc</p>
</div>

CSS

.title { text-align: center; }

Update: Here is a working sample: http://codepen.io/anon/pen/jEnys

Upvotes: 1

Related Questions