Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Centrowanie inputa
Forum PHP.pl > Forum > Przedszkole
zomfire
Witam, mam nastepujący problem, mój input z wyszukiwaniem nie chce się centrować w pionie:
HTML:
  1. <div class="panel_nawigacyjny">
  2. <div class="pn_kontener">
  3. <div class="pn_lewo">
  4. <div class="pn_text">Kategorie</div><a class="button3"></a>
  5. </div>
  6. <div class="pn_prawo">
  7. <div class="pn_text">Wyszukaj:<input type="text" value="Szukaj..." class="pn_wyszukiwarka" autofocus="autofocus" onclick=""></input></div><a class="button4"></a>
  8. </div>
  9. </div>
  10. </div>



CSS:
  1. .panel_nawigacyjny{
  2. width:100%;
  3. background-color:#313131;
  4. min-height:30px;
  5. border-radius:6px;
  6. box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.3);
  7. }
  8. .pn_kontener{
  9. width:80%;
  10. margin:0px auto;
  11. }
  12. .pn_lewo{
  13. float:left;
  14. display:inline-block;
  15. }
  16. .pn_prawo{
  17. float:right;
  18. display:inline-block;
  19. }
  20. input[type="text"] {
  21. line-height:30px;
  22. border-radius:3px;
  23. }
  24. .pn_text{
  25. line-height:30px;
  26. text-align: center;
  27. font-size:18px;
  28. color:#B0AFAE;
  29. }


Tekst po lewej jest w na środku, natomiast input na górze.
trueblue
Usuń line-height dla input.
zomfire
To nic nie zmienia.
Daimos
  1. div.pn_text{
  2. display: table-cell;
  3. vertical-align: middle;
  4. }

zamykaj input tak:
  1. <input type="text"/>
zomfire
Teraz to wygląda tak: http://ifotos.pl/zobacz/errorpng_wraxrqs.png
Czyli input jest u góry, a ikonki sa pozamieniane i jedna przeszła do drugiej linii.
Mi zależy na tym by wyglądało tak jak na projekcie: http://ifotos.pl/z/wraxrqa/
I by te elementy w kontenerze były wyśrodkowane w pionie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.