如何为span类添加样式

Question

sorry for the silly question by I'm new to html5 and css and mainly just using templates in joomla. I want to add share this buttons to my template file so I've got the code from the share this site and added the buttons no problem. The issue I have is centering the buttons. Not sure what styling I need to add and where, thanks in advance for any pointers...

How do I tell these to sit in the middle of the page? Not sure where / how to add text align...

<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_email_large' displayText='Email'></span>

Answer 1

You need a div to put those spans into to center them all. like this.

<div style="text-align: center">

<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_email_large' displayText='Email'></span>

</div>

Answer 2

You can do it two ways. You can either have an external style sheet in which you place all of your classes and ID styles, or you can use the style=""; within the context of the span. So for example:

CSS

.st_email_large {
    margin:0 auto;
    width: 300px;
    text-align: center;
}

In this case the (( . )) represents a class and everything within the brackets is what your span will do. Or you can do this:

<span class='st_email_large' style="margin:0 auto; width: 300px; text-align: center;" displayText='Email'></span>

If you use a external style sheet, you need to make sure you include it into your page within the head tag.