以HTML格式居中放置文本框

我正在製作網站，並試圖在我的網站上放置一個文本框。我嘗試了一切，似乎沒有任何工作。我需要讓它居中，以便在移動視圖上看起來不錯。以HTML格式居中放置文本框

我看着這個線程

而且我在它試圖解決方案，但毫無效果。

這裏是我嘗試以文本框爲中心的代碼。請記住，我不是試圖將文本居中，我希望整個文本框居中。

.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">

任何幫助，將不勝感激謝謝。

來源

2016-04-19 Catastrophe

你可以用多種方式做到這一點。

隨着文本框的固定寬度：

.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">

不與所述文本框的固定寬度：

環繞一個div周圍text-align: center;。

.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>

來源

2016-04-19 15:29:52 Roy

首先解決工作奇觀。謝謝<3 – Catastrophe

簡單的方法。

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

https://jsfiddle.net/3e8bxhmg/

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

來源

2016-04-19 15:30:47

你也可以做到這一點在HTML中通過將中心標記周圍像這樣：

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

但如果你有多個輸入框，這可能是一個效率相當低的方法。

來源

2016-04-19 15:35:15 Donutface007

.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>

來源

2016-04-19 15:38:49

在現代瀏覽器都支持CSS 3，您可以使用這些三行代碼做一個簡單的定心：

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

的魔術是在transform: translatex(-50%);部分。
通常的CSS將您的元素放置在框的左上角。
由於left: 50%是視口的水平中心，因此translate現在從此位置減去元素的寬度，從而導致元素居中。

position: absolute它需要它的工作！

這裏有一個fiddle

來源

2016-04-19 15:42:39 SUBHUMAN

與文字居中對齊包裝在一個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>

來源

2016-04-19 15:48:49 Julia

以HTML格式居中放置文本框

回答

相關問題