怎么做到如图中这样文字嵌在框中间

Question

想做一个像图上这个效果的文字框出来，怎么样才能把字嵌在框里，用了div和border但是还是做不出来这个效果，求个解答！谢谢

Answer 1

要实现这种文字嵌在框中间的效果，你可以使用 CSS 的 text-align 属性来实现。以下是一个简单的示例，通过 HTML 和 CSS 来制作这个效果：

HTML:

html
<div class="text-box">
    <p>这是一段文字</p>
</div>

CSS:

css
.text-box {
    border: 2px solid black;  /* 设置边框 */
    padding: 10px;  /* 设置内边距 */
    text-align: center;  /* 将文字居中 */
    display: flex;  /* 设置为 flex 容器 */
    justify-content: center;  /* 将文字在水平方向上居中 */
    align-items: center;  /* 将文字在垂直方向上居中 */
}

这个示例中的 CSS 样式将创建一个带有黑色边框的框，并将框中的文字居中。你可以根据需要调整边框、内边距和文字的大小来满足你的需求。