时间戳

首页 > 解决方案 > 标签 css 文本中心内的 p 标签

html - 标签 css 文本中心内的 p 标签

问题描述

我正在设计一个横幅和横幅标题，其中包含一些细节，标题内容是 h2 标签和 p 标签。

在 p 标签中，该 p 标签中有一个描述，标签链接也可用。所以想要居中但不正确。

<p>printing and typesettinever since the 1500 <a href="#">Know More</a></p>

在此处输入图像描述

有可能

position: absolute;
left: 47%;
bottom: 33%;

想要这样的设计 CSS将修复它。我需要另一种方式来做。我是 CSS 新手，所以尝试新的想法和可能性。

标签： htmlcssless

解决方案

您需要将“了解更多”文本放入单独的p元素中。

<p>printing and typesettinever since the 1500</p>
<p><a href="#">Know More</a></p>

这是因为默认情况下a是一个display: inline元素，这意味着它执行您在此处看到的操作 - 它与其他文本内联显示。

p相比之下，该元素display: block默认具有，这意味着它被浏览器视为不同的文本块。

就浏览器如何处理这两种类型的元素，甚至允许它们具有哪些 CSS 属性而言，差异非常显着。

答案不是让您a拥有该display: block属性，而只是将现有p块分成两部分，并在其自己的段落中使用按钮。您需要根据各个部分将如何显示为块或连续的文本部分来考虑您的布局，然后使用 HTML 对内容进行语义标记。然后，您的 CSS 将拥有正确的上下文来正确呈现页面。

（对于如何标记元素有很多选择 - 例如，您可以使用divs 而不是ps。“正确”选择取决于页面的语义结构以及您希望它的结构。在这里，我已经只是坚持你已经有的标签。）

推荐阅读