如何在我的文本旁边画两条细线？（HTML）（CSS）

我已设法使我的文字居中

但是现在我想在我的文本的两边有两条细线，就像在这个网站上看到的那样：

我已经用红色标记了这些线

到目前为止，我已经用html创建了一个div，然后使用css。 这是我的html：（我把它留空了，因为文本是分开的）

div{
宽度：1000px；
右边框：2倍纯色灰色；
左边框：2倍纯色灰色；
保证金：0自动；
对齐内容：居中对齐；
高度：100px；
溢出：隐藏；
}

---

如果将文本粘贴到该div中，将得到预期结果

div{
宽度：1000px；
右边框：2倍纯色灰色；
左边框：2倍纯色灰色；
保证金：0自动；
对齐内容：居中对齐；
高度：100px；
溢出：隐藏；
填充：1vh 1vw；
}

这是你的头衔
这是你的一段

如果将文本粘贴到该div中，则会得到预期结果

div{
宽度：1000px；
右边框：2倍纯色灰色；
左边框：2倍纯色灰色；
保证金：0自动；
对齐内容：居中对齐；
高度：100px；
溢出：隐藏；
填充：1vh 1vw；
}

这是你的头衔
这是你的一段

如果您想要文本周围的线条，请将显示更改为显示：inline block

div{
显示：内联块；
右边框：2倍纯色灰色；
左边框：2倍纯色灰色；
保证金：0自动；
对齐内容：居中对齐；
高度：100px；
溢出：隐藏；
}

---

所有我的教程

如果希望文本周围的线条，请将显示更改为显示：inline block

div{
显示：内联块；
右边框：2倍纯色灰色；
左边框：2倍纯色灰色；
保证金：0自动；
对齐内容：居中对齐；
高度：100px；
溢出：隐藏；
}

---

我所有的教程

我认为最简单的方法是引导。您可以使用卡组件

我用bootstrap为您做了一个简单的演示，您可以在这里看到bootstrap的更多细节

你好，世界！


卡片标题
卡片字幕
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分

我认为最简单的方法是引导。您可以使用卡组件

我用bootstrap为您做了一个简单的演示，您可以在这里看到bootstrap的更多细节

你好，世界！


卡片标题
卡片字幕
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分

我给你写了一个片段。请为您的文本添加HTML，我为您制作了一个片段。请为你的文本添加HTML太多了！那很有帮助！！不客气：）你能把答案标记为“接受”吗？很抱歉，但不幸的是，另一个解决方案对我来说要简单得多。我只是把我的内容放进了网页。谢谢你在回答问题上花了这么多精力！我相信你的解决方案也很优雅！太多了！那很有帮助！！不客气：）你能把答案标记为“接受”吗？很抱歉，但不幸的是，另一个解决方案对我来说要简单得多。我只是把我的内容放进了网页。谢谢你在回答问题上花了这么多精力！我相信你的解决方案也很优雅@大肠杆菌没问题；）别忘了把这个标记为答案。我已经把你的答案标记为正确。非常感谢。但是，我必须手动设置行的长度以匹配文本。有没有办法设置它，使行自动调整到文本的数量？我想说的是，当我输入文本并将“边线”长度设置为1000px时，行太长了。我必须手动更改以匹配它，还是可以自动执行此操作？@coelestium您可以通过删除宽度并将

display:inline block

添加到div样式来解决此问题。@coelestium没问题；）别忘了把这个标记为答案。我已经把你的答案标记为正确。非常感谢。但是，我必须手动设置行的长度以匹配文本。有没有办法设置它，使行自动调整到文本的数量？我想说的是，当我输入文本并将“边线”长度设置为1000px时，行太长了。我必须手动更改此项以匹配它，还是可以自动执行此操作？@coelestium您可以通过删除宽度并将

display:inline block

添加到div样式来解决此问题。非常抱歉，您的解决方案没有帮助，因为我已经对其进行了测试。正确的方法是将我的内容放入标签中。但是谢谢你花了这么多精力在你的答案上！！很抱歉，你的解决方案没有用，因为我已经测试过了。正确的方法是将我的内容放入标签中。但是谢谢你花了这么多精力在你的答案上！！