使边框仅围绕文本，而不是整个块

Question

在下面的代码段中，边框勾勒出块的轮廓，而不仅仅是块内的文本：

.border {
font-size: 30px;
text-align: center;
border: red 2px solid;
}

<p class="border">Learn More!</p>

我尝试过inline-block，它确实有效，但是，我希望它以页面为中心，在这种情况下align-text/align-items不起作用。

Answer 1

您可以在段落中使用一个span来表示要框起来的单词。此外，您应该避免调用类"；边界"；。以下是我的建议：

<p class="title"><span style="border: red 2px solid">Learn More!</span></p>
.title{
font-size: 30px;
text-align: center;
}

Answer 2

如果你想在单词周围有一个边框，可以使用span标记。如果要在字符周围设置边框，请使用SVG文本并应用笔划(带宽度和颜色(。要使内联元素居中(显示：内联/内联块(，必须在父元素上设置文本对齐特性。

Answer 3

将inline-block封装在div(block元素(中，并在其上使用text-align: center。

.border {
font-size: 30px;
text-align: center;
border: red 2px solid;
display: inline-block;
}
#wrapper {
text-align: center;
}

<div id="wrapper"><p class="border">Learn More!</p></div>

Answer 4

您可以将类应用于div，如下所示：

<div class="container">Learn More!</div>
<style>
.container {
padding: 5px;
font-size: 30px;
text-align: center;
border: red 2px solid;
margin: auto;
width: 30%;
}
</style>

Answer 5

网络上的字体是基于矢量的图形，您可以使用-webkit-text-stroke，尽管E11不支持它。这是使用-webkit-text-fill-color、-webkit-text-stroke-width和-webkit-text-stroke-color的简写。所以你会使用这样的东西：

.border {
font-size: 30px;
text-align: center;
-webkit-text-stroke: 2px red;
}

示例：https://jsbin.com/ribacacazi/edit?html，css，输出

Answer 6

.border-span {
font-size: 30px;
text-align: center;
border: red 2px solid;
padding:10px;
}

<p>
<span class="border-span">Learn More!</span>
</p>

Answer 7

您可以指定一个宽度(使用max-content来适应内容的最大宽度(，然后添加一个margin: auto使其居中(因为它是<p>，所以它有display: block，它将使元素居中，如果您使用不同的元素，则可能需要指定块类型的显示。(

这里有一个例子：

.border {
font-size: 30px;
text-align: center;
border: red 2px solid;
width: max-content;
margin: auto;
}

<p class="border">Learn More!</p>