Zentrieren einer Textbox in HTML

Question

Ich mache eine Website und ich versuche, ein Textfeld auf meiner Website zu zentrieren. Ich habe alles versucht und nichts scheint zu funktionieren. Ich muss es zentriert haben, damit es auch auf der mobilen Ansicht gut aussieht.

ich auf diesen Thread sah

CSS/HTML centering a textbox

Und ich versuchte, die Lösungen drin, aber nichts funktionierte.

Hier ist mein Code für das Textfeld, das ich versuche zu zentrieren. Bitte beachten Sie, dass ich nicht versuche, den Text im Inneren zu zentrieren. Ich möchte, dass das gesamte Textfeld zentriert wird.

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

Jede Hilfe wäre dankbar, danke.

Answer 1

Sie können es auf verschiedene Arten tun.

Mit einer festen Breite der Textbox:

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

nicht mit einer festen Breite der Textbox:

Wickeln Sie ein div um mit 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>

Answer 2

einfachste Weg.

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

https://jsfiddle.net/3e8bxhmg/

nicht <center> verwenden diese abgeschrieben https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

Answer 3

Sie es auch, indem Center-Tags um es wie so im html tun könnte:

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

Aber das könnte eine ziemlich ineffiziente Methode sein, wenn Sie mehrere Eingabefelder haben.

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

In modernen Browsern, die 3 CSS unterstützen, können Sie eine einfache Zentrierung mit diesen drei Zeilen Code tun:

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

Der Zaubertrick ist im transform: translatex(-50%); Teil.
Übliche CSS positioniert Ihr Element an der oberen linken Ecke der Box.
Die Translate subtrahiert nun die Breite des Elements von dieser Position, was zu einer Zentrierung des Elements führt, da left: 50% die horizontale Mitte des Ansichtsfensters ist.

position: absolute ist erforderlich, damit es funktioniert!

Hier ist ein fiddle

Answer 6

es mit Text align Zentrum in einem div Wrap:

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