Html 如何向span类添加样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19543964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add style to a span class
提问by user2911699
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...
抱歉，我是 html5 和 css 新手，主要只是在 joomla 中使用模板。我想将共享此按钮添加到我的模板文件中，因此我从共享此站点中获得了代码并添加了按钮没问题。我遇到的问题是将按钮居中。不确定我需要添加什么样式以及在哪里，在此先感谢您的指点...
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>
回答by Chris Hawkes
You need a div to put those spans into to center them all. like this.
您需要一个 div 将这些跨度放入以将它们全部居中。像这样。
<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>
回答by Keith
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:
你可以通过两种方式做到这一点。您可以有一个外部样式表，您可以在其中放置所有类和 ID 样式，也可以使用 style=""; 在跨度的范围内。例如：
CSS
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.
如果您使用外部样式表，则需要确保将其包含在页面的 head 标签内。
