[分享]css中怎么办文本框水平居中

在CSS中要实现文本框的水平居中，通常会采用以下两种方法。第一种方法是使用textalign属性将文本框的内部文本进行水平居中对齐。假设我们有以下的HTML代码： 我们要将该文本框水平居中，可以在...

在CSS中要实现文本框的水平居中，通常会采用以下两种方法。
第一种方法是使用text-align属性将文本框的内部文本进行水平居中对齐。假设我们有以下的HTML代码：

<div class="container">
  <input type="text" class="textbox" value="这是一个文本框">
</div> 

我们要将该文本框水平居中，可以在CSS中添加以下的代码：

.container {
  text-align: center;
}
.textbox {
  display: inline-block;
} 

其中，我们将容器div设置为text-align: center，这样文本框内的所有文本都会水平居中对齐。但容器内的元素默认会占据整个宽度，因此我们还需要将文本框设置为display: inline-block，这样它就只会占据自己的宽度。
第二种方法是使用margin属性将文本框的左右外边距设为auto，这样就可以实现水平居中。因此，我们可以使用以下的CSS代码：

.textbox {
  display: block;
  margin: 0 auto;
} 

这里我们将文本框设置为display: block，使其成为块级元素，并将左右外边距设为auto。这样文本框就会居中对齐。
综上所述，以上两种方法都可以实现文本框的水平居中。大家可以根据自己的喜好和需求进行选择和使用。