时间戳

首页 > 解决方案 > 内联文本居中对齐

html - 内联文本居中对齐

问题描述

我有一个“p”标签，它是内联的，（我不想显示它块）但是当我使用text-align: center;它时它不起作用。

HTML：

<p class="center-align"></p>

CSS：

display: inline

标签： htmlcss

解决方案

使<p>标签内联没有什么意义。一个<p>元素代表一个段落，一个段落始终是一个与其他文本块分开的文本块。此外，您不能将一个段落放在另一个段落中，所以我什至不确定<p>标签将内联到什么（什么父元素将被包裹在它周围？）。

您几乎可以肯定将 a<span>用于基本内联元素，或辅助内联元素的宿主之一，如<strong>、<em>、<small>等<q>。

更重要的是，将文本置于内联标签的中心也没有什么意义。内联元素会拉伸以占据其内容的宽度，并将内容包裹在其父元素中。文本将以什么为中心？

关于这一点，你可以做一些事情：

  • 如果优先考虑在块的背景和文本之间留出空间，您可以添加一些padding-inline以在块内的文本周围添加一些空间。同样，考虑从 a 更改<p>为其他内容。

.a {
  display: block;
}

.b {
  display: inline;
  background-color: lightgrey;
  padding-inline: 20px;
}
<p class="a">
    Lorem ipsum dolor sit amet consectetuer 
    adipiscing elit sed at turpis vitae velit euismod 
    aliquet pellentesque et arcu nullam. Venenatis 
    gravida orci pellentesque et arcu nam pharetra 
    vestibulum viverra varius enim nam laoreet dui 
    sed magna nunc in.
      <span class="b">Turpis ac lacus eleifend 
          sagittis pellentesque ac turpis aliquam 
          justo lectus iaculis a auctor sed congue 
          in nisl aenean luctus. Vulputate turpis 
          mauris urna sem suscipit vitae dignissim 
          id ultrices sed nunc phasellus nisi metus 
          tempus sit amet ultrices ac porta. Nec 
          felis quisque male suada.
      </span>
    Nulla sed pede volutpat pulvinar sed non ipsum 
    mauris et dolor pellentesque suscipit accumsan 
    massa in. Consectetuer lorem eu lobortis egestas 
    velit odio imperdiet eros sit amet sagittis nunc 
    mi ac neque nulla blandit justo a metus ut venenatis.
</p>

  • 如果优先级是让文本居中，您可以更改display为block并将文本设置为居中对齐。

推荐阅读