Umieść pole wprowadzania w środku div

Mam div i chcę, aby pole wprowadzania było umieszczone w jego środku. Jak mogę to zrobić?Umieść pole wprowadzania w środku div

Źródło

2009-08-15 user156073

u można siać nam co próbowali i nie działa ? – TigerTiger

Czy nie powinno to przejść do doctype? (http://blog.stackoverflow.com/2009/08/stack-overflow-and-doctype/; http://doctype.com/) ... dlaczego nie mamy opcji close-do-doctype ? – derobert

#the_div input { 
    margin: 0 auto; 
}

Nie jestem pewien, czy działa to dobrze w IE6, więc może będziesz musiał to zrobić zamiast tego.

/* IE 6 (probably) */ 
#the_div { 
    text-align: center; 
}

Źródło

2009-08-15 07:46:27

dzięki za pomoc. – user156073

Idealny! lepsze niż wszystkie złożone rozwiązania. –

#input_box { 
    margin: 0 auto; 
    text-align: left; 
} 
#div { 
    text-align: center; 
} 

<div id="div"> 
    <label for="input_box">Input: </label><input type="text" id="input_box" name="input_box" /> 
</div>

czy można zrobić to za pomocą wyściółki, ale to nie jest wielki idei.

Źródło

2009-08-15 15:04:58 Tom

Spróbuj tej strony internetowej pokazuje, jak wyśrodkować rzeczy w div i lub tekstu. Dorward

Źródło

2009-08-15 15:52:29

Połów jest taki, że elementy wejściowe są wbudowane. Musimy wykonać blok (display: block) przed pozycjonowaniem go na środku: margin: 0 auto. Proszę zobaczyć kod poniżej:

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

Ale jeśli masz div, który jest umieszczony = absolutna to musimy robić rzeczy trochę differently.Now to zobaczyć!

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

Mam nadzieję, że to może być pomocne. Dziękuję.

Źródło

2012-08-26 07:34:36 kta

"Połów jest taki, że elementy wejściowe są wbudowane" - to jest klucz! thansk – oak

Oto dość niekonwencjonalny sposób to zrobić:

#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 
}

To nie może być najlepszym sposobem, aby to zrobić, a marża nie będzie działać, ale spełnia swoje zadanie. Jeśli chcesz użyć marginesu, możesz zawinąć element div, który będzie wyświetlany jako komórka tabeli w innym "normalnym" div.

JSFiddle: http://jsfiddle.net/qw4QW/

Źródło

2012-08-26 08:07:05 starbeamrainbowlabs

można po prostu użyć następującego CSS dla pola wejściowego:

.center-block { 
    margin: auto; 
    display: block; 
}

Teraz w html,

<div> 
    <input class="center-block"> 
</div>

Źródło

2017-11-07 15:23:49 Ayan

Umieść pole wprowadzania w środku div

Odpowiedz

Powiązane problemy