html - 讨厌的 lil' <small> 元素不能与文本对齐一起工作,需要被阻止

标签 html css w3c semantic-markup

所以您尝试将 <small> 居中具有 CSS 属性的 HTML 元素 text-align: center (或 right )但它不起作用?

small element resisting text-align

嗯,那可能是因为你的 HTML/CSS 看起来像 like this .有一个简单的 CSS 解决方案...

如果你设置一个small { display: block }属性(property)like this然后它就像一个魅力:

small element being good

万岁!

但您可能会说出某些地方不对...为什么它仍然有效?

最佳答案

嗯,<small>基本上是一个内联元素,text-align属性(property)是applied to block elements并传递给子内联元素(或 strings inside )。

通过制作small放入 block 元素中,我们允许对其中的文本设置样式。


另外,W3 spec定义 <small>在短语上下文中使用的元素——类似于 <strong> 等元素, <b> , <span> , <a> , and so on — 这会做 same thing在这种情况下。

W3 wiki examples建议把<small>里面<p>标签和样式——我想这是更语义化的解决方案,这里是the code如果您需要查看它。


为什么这有点令人困惑?

嗯,网络上的一些第 3 方资源没有提及,或者至少没有明确提及。例如,HTML5 Doctor's example使用 small周围没有 block 元素容器的元素。

希望澄清事情!一如既往,如果我遗漏了什么,请告诉我。 (我想我做到了。)

关于html - 讨厌的 lil' <small> 元素不能与文本对齐一起工作,需要被阻止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13205402/

相关文章:

javascript - 如何禁用特定类下的提交按钮

javascript - 如何使window.scrollTo()具有平滑效果

html - 外部 CSS 文件加载顺序

c# - Azure Function .net core 6 隔离-traceparent (W3C) 关联

html - 没有单位的 CSS 属性的回退

android - 如何使用 HTML5 Appcache 缓存所有内容?

html - 将关键帧更改为第二张图片

html - 防止段落中的跨度换行

jquery - 通过切换类在高度之间转换?

javascript - XHTML Mobile 1.0 - W3C 验证因脚本而无效