Ich habe ein div, und ich möchte das Eingabefeld in der Mitte platziert werden. Wie kann ich das tun?
Antworten
Zu viele Anzeigen?
kta
Punkte
18216
Der Haken ist, dass Eingabeelemente inline sind. Wir müssen es blockieren (display:block), bevor wir es zentrieren können: margin : 0 auto. Bitte sehen Sie den Code unten:
<html>
<head>
<style>
div.wrapper {
width: 300px;
height:300px;
border:1px solid black;
}
input[type="text"] {
display: block;
margin : 0 auto;
}
</style>
</head>
<body>
<div class='wrapper'>
<input type='text' name='ok' value='ok'>
</div>
</body>
</html>Wenn Sie aber ein div haben, das absolut positioniert ist, dann müssen wir die Dinge ein wenig anders angehen, und zwar so!
<html>
<head>
<style>
div.wrapper {
position: absolute;
top : 200px;
left: 300px;
width: 300px;
height:300px;
border:1px solid black;
}
input[type="text"] {
position: relative;
display: block;
margin : 0 auto;
}
</style>
</head>
<body>
<div class='wrapper'>
<input type='text' name='ok' value='ok'>
</div>
</body>
</html>Ich hoffe, dass dies hilfreich sein kann.
Ayan
Punkte
7004
August Lilleaas
Punkte
52649
Tom
Punkte
6737
starbeamrainbowlabs
Punkte
5196
Hier ist ein eher unkonventioneller Weg, dies zu tun:
#inputcontainer
{
display:table-cell; //display like a <td> to make the vertical-align work
text-align:center; //centre the input horizontally
vertical-align:middle; //centre the input vertically
width:200px; //widen the div for demo purposes
height:200px; //make the div taller for demo purposes
background:green; //change the background of the div for demo purposes
}Es ist vielleicht nicht die beste Methode, und der Spielraum wird nicht ausreichen, aber es ist gut so. Wenn Sie Rand verwenden müssen, dann könnten Sie das Div, das als Tabellenzelle angezeigt wird, in ein anderes "normales" Div einschließen.
JSFiddle: http://jsfiddle.net/qw4QW/
0 Stimmen
Können u säen uns, was Sie versucht und nicht funktioniert?
1 Stimmen
Sollte dies nicht zu doctype übergehen? ( blog.stackoverflow.com/2009/08/stack-overflow-and-doctype ; doctype.com ) ... warum haben wir nicht eine "belongs-on-doctype close"-Option?