将文本框居中 HTML

Question

我正在制作一个网站，我想在我的网站上居中显示一个文本框。我尝试了一切，但似乎没有任何效果。我需要让它居中，这样它在移动视图上看起来也不错。

我看过这个帖子

CSS / HTML centering a textbox

我尝试了其中的解决方案，但没有任何效果。

这是我试图居中的文本框的代码。请记住，我并不是要让文本居中，我希望整个文本框居中。

.imgUrlText
{
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
}

<input type = "text" class = "imgUrlText" size = "70" id = "urlText" placeholder = "Image Url">

如有任何帮助，我们将不胜感激。

Answer 1

您可以通过多种方式进行。

固定宽度的文本框：

.imgUrlText {
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-variant: normal;
  font-weight: bold;
  margin: 0 auto;
  display: block;
  width: 500px;
}

<input type="text" class="imgUrlText" size="70" id="urlText" placeholder="Image Url">

不带固定宽度的文本框:

用 text-align: center; 包裹 div。

.aligncenter {
  width: 100%;
  text-align: center;
}

.imgUrlText {
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-variant: normal;
  font-weight: bold;
  display: inline-block;
}

<div class="aligncenter">
<input type="text" class="imgUrlText" size="70" id="urlText" placeholder="Image Url">
</div>

Answer 2

最简单的方法。

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

https://jsfiddle.net/3e8bxhmg/

不要使用 <center> 这是贬值的 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

Answer 3

您也可以在 html 中通过在其周围放置中心标签来完成此操作：

 <center><input type = "text" class = "imgUrlText" size = "70" id = "urlText" placeholder = "Image Url"></center>

但如果您有多个输入框，这可能是一个相当低效的方法。

Answer 4

.imgDiv {
    width:400px;
    height:50px;
    background-color: #A12A1E;
    color:White;
    margin:0 auto;
}

.imgDiv > div {
    margin:0 auto;
    width:250px;
}

input[type="text"] {
    margin:10px auto;
}

<div class="imgDiv">
  <div>
<input type = "text"  size = "30" id = "urlText" placeholder = "Image Url">
    </div>
</div>

Answer 5

在支持 CSS3 的现代浏览器中，您可以使用以下三行代码轻松居中：

position: absolute;
left: 50%;
transform: translateX(-50%);

魔术在transform: translatex(-50%);部分。
通常 CSS 将您的元素放置在框的左上角。
翻译现在从这个位置减去元素的宽度，这导致元素居中，因为 left: 50% 是视口的水平中心。

position: absolute 才能正常工作！

这是 fiddle

Answer 6

将其包装在 div 中，文本居中对齐：

.imgUrlText
{
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
    margin: 0 auto;
}

.center {
  text-align: center;
}

<div class="center">


<input type = "text" class = "imgUrlText" size = "70" id = "urlText" placeholder = "Image Url">

</div>

将文本框居中 HTML

Centering a textbox in HTML

html

css

textbox

input