Html 如何在跨度中居中文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27882565/
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 do I center text in a span?
提问by Paul
Please see thiswebsite
请看这个网站
How do I get the test TEST to be in the middle of the span it is contained in?
如何让测试 TEST 位于它所包含的跨度的中间？
This is using Twitter Bootstrap.
这是使用 Twitter Bootstrap。
I have tried loads of different ways, like css, inline styling, setting margins, etc but I cannot get the span to do what I need. It appears as though its being drawn to the exact width of it's text.
我尝试了很多不同的方法，比如 css、内联样式、设置边距等，但我无法让跨度去做我需要的事情。看起来好像它被绘制到它的文本的确切宽度。
My main aim is actually to be able to bring the text Nationwide Alerts down so that it is on the same row as the buttons.
我的主要目标实际上是能够将文本 Nationwide Alerts 下拉，使其与按钮位于同一行。
The tricky thing is that I cant give this span a hard coded width because of the page being resized
棘手的是我不能给这个跨度一个硬编码的宽度，因为页面被调整大小
Paul
保罗
回答by badfilms
Put a background color on the span to see why it isn't working. Those three items are in a div with no CSS associated with it. In order for the span to be in the middle, you need the div that surrounds it to, at the very least, have width & text-align properties.
在跨度上放置背景颜色以查看它为什么不起作用。这三个项目在一个没有 CSS 关联的 div 中。为了使跨度位于中间，您需要围绕它的 div 至少具有宽度和文本对齐属性。
Change
改变
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
到
<div class="centerTest">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
with whatever name you want & use
使用您想要的任何名称并使用
.centerTest {
width:100%;
text-align:center;
}
Additionally, with this markup, your code as is will cause the span to center, but you would have to add float:leftto your btnPreviousid. I would refrain, as much as possible, from using inline CSS unless you are designing HTML email, so just create a CSS file that you include LAST in your list of CSS files and add your edits to there.
此外，使用此标记，您的代码将导致跨度居中，但您必须添加float:left到您的btnPreviousid。除非您正在设计 HTML 电子邮件，否则我会尽可能避免使用内联 CSS，因此只需创建一个 CSS 文件，将 LAST 包含在您的 CSS 文件列表中，并将您的编辑添加到那里。
For example, if btnPreviousis in your template's CSS file, in YOUR CSS file, just add
例如，如果btnPrevious在您模板的 CSS 文件中，在您的 CSS 文件中，只需添加
#btnPrevious {
float:left;
}
and you're good.
你很好。
EDIT:
编辑：
Sorry missed the Bootstrap part as I just did a search for TEST inside your code. Bootstrap is built with these classes, and being that those are already inside of a container, you should be able to add text-centerto the blank div and it should do the trick
抱歉错过了 Bootstrap 部分，因为我只是在您的代码中搜索了 TEST。Bootstrap 是用这些类构建的，并且这些类已经在容器内，您应该能够添加text-center到空白 div 并且它应该可以解决问题
Change
改变
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
到
<div class="text-center">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
回答by Hideaki
Just adding that you can now simply use css flexbox to position text inside any element including spans.
只需补充一点，您现在可以简单地使用 css flexbox 将文本定位在包括跨度在内的任何元素内。
The original link is no longer working, but this should center the text horizontally regardless of the size of the element.
原始链接不再有效，但无论元素大小如何，这都应将文本水平居中。
span { display: flex;
justify-content: center }
If you want to align vertically, use align-items: center
如果要垂直对齐，请使用 align-items: center
回答by Emil
Spans are, as you suspected, drawn to the exact width of it's text. You can circumvent this by setting it's style to display: block; width: 100%;, or any width you would like. This will mess up everything in your case, since you have other elements before and after the span itself.
正如您所怀疑的那样，跨度被绘制到其文本的确切宽度。您可以通过将其样式设置为display: block; width: 100%;或您想要的任何宽度来规避此问题。这会弄乱您的情况，因为您在跨度本身之前和之后都有其他元素。
Therefor you'll need to in addition set it's position to absolute.
因此，您还需要将其位置设置为绝对。
回答by Coding Enthusiast
Using bootstrap 2.3.0, there is a .text-center class you can use 3
使用引导程序 2.3.0，您可以使用 .text-center 类 3
<span class="text-center">...</span>
and a pagination-centered for bootstrap 3
和一个以分页为中心的 bootstrap 3
<span class="pagination-centered">...</span>
