css 文本在文本框居中

CSS 可以让文本框中的文本居中。在文本输入和文本框中，文本是唯一的元素，大多数场景下文本居中是很重要的。下面是一个使用 CSS 在文本框中让文本居中的示例。

textarea{
    text-align: center;
}

css 文本在文本框居中

在上面的 CSS 代码中，我们使用 text-align 属性来定义文本在文本框内的对齐方式。通过将值设置为 center，我们可以将文本放在文本框的中心位置。

另外，有时候需要在文本框中垂直居中文本。可以使用 line-height 属性来做到这点。例如：

textarea{
    text-align: center;
    line-height: 100px; /* 文本框高度为 100px */
}

在上面的 CSS 代码中，我们将 line-height 属性设置为文本框的高度，这使得文本在垂直方向上居中。

注意，这些 CSS 属性只适用于文本框元素，而不适用于普通文本元素。如果想要在普通文本元素中实现类似的效果，可以将该元素包装在一个父元素中，并将父元素的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性来实现垂直和水平居中。

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
.child{
    text-align: center;
}

在上面的 CSS 代码中，我们创建了一个包装文本元素的父元素，并将该元素的 display 属性设置为 flex。然后，使用 justify-content 和 align-items 属性实现了垂直和水平居中。注意，子元素的 text-align 属性可以自定义。

相关文章