显示：内联，但在不同的行上
内联元素很棒，因为它们的宽度就是内容的宽度，并且可以按照 CSS 规则将它们居中：
text-align: center
但是内联元素保持在同一行。是否可以将它们垂直对齐？
小提琴：http://jsfiddle.net/_bop/NhVaF/ 全屏小提琴：http://jsfiddle.net/_bop/NhVaF/show
请不要：
- 更改示例中的 HTML。改变CSS！
- 想出其他技术来居中元素，除非您有更好的解决方案，可以处理未指定宽度的元素，并且不需要大量的容器和/或浮动技巧。
提前致谢！
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
- Change the HTML in the example. Change the CSS!
- Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在标记中，如果跨度位于不同行，您可以在父容器上添加：
使用此 CSS 声明，您的跨度仍居中，并且无需添加 HTML 标记。
您可以在此处找到有关空白的更多信息：
对于 IE7兼容性，您还可以在父容器上添加：
In your markup, if the span are on different rows you could add on the parent container:
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
You can find more informations here about white-space:
For an IE7 compatibility, you could also add on the parent container:
如果您想将跨度显示在另一个跨度之上，则需要一些固定块来固定跨度。这是我能做的最好的了。
http://jsfiddle.net/NhVaF/5/
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
如果你想让它在不改变 html 的情况下工作，那么你最好的选择就是简单地 float: left;清除：左；像这样：
显示：块；将无法工作，因为它要求您设置宽度（否则它们将填充可用空间）。
显示：内联块；将无法工作，因为仍然显示在同一行。
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
我也只是在玩这个，并通过简单地在每个
inline-block元素后面放置
如果您想使用 CSS 创建换行符，请尝试使用
:after伪类。像这样的东西会起作用吗？打破
:after技巧：https://stackoverflow.com/a/10934138/6586407I was just playing around with this too, and found my solution by simply placing
<br>after eachinline-blockelement. I know it's altering the html but only slightly!If you want to create line breaks with CSS try using the
:afterpseudo class. Would something like this work?break
:aftertrick: https://stackoverflow.com/a/10934138/6586407