Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]wyśrodkowanie w pionie
Forum PHP.pl > Forum > Przedszkole
agata
12.05.2010, 11:28:40
witam,
temat był już poruszany pewnie, ale nigdzie nie mogę znaleźć rozwiązania które by zadziałało.
Mam problem jak wyśrodkować diva w pionie.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <link rel="stylesheet" rev="stylesheet" href="main.css">
  6.         <title></title>
  7.     </head>
  8.     <body>
  9.  
  10.         <div id="all">
  11.             <div id="top">
  12.                 <div id="top_left">
  13.  
  14.                 </div>
  15.                 <div id="top_right">
  16.  
  17.                 </div>
  18.             </div>
  19.  
  20.             <div id="bottom">
  21.                 <div id="bottom_left">
  22.  
  23.                 </div>
  24.                 <div id="bottom_right">
  25.  
  26.                 </div>
  27.             </div>
  28.  
  29.             <div id="img">
  30.                 <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="">
  31.             </div>
  32.         </div>
  33.     </body>
  34. </html>
[HTML] pobierz, plaintext


i css
[PHP] pobierz, plaintext 
  1. body {
  2.     background: url(http://www.provider.pl/img/bckg2.png);
  3.     font-size: 12px;
  4.     font-family: arial, helvetica, sans-serif;
  5.     color: #333;
  6.     background-repeat:repeat-x;
  7.     text-align: center;
  8.     vertical-align: middle;
  9.  
  10.  
  11. }
  12.  
  13.  
  14. #all{
  15.  
  16.     background-color: #000;
  17.     width: 400px;
  18.     height:400px;
  19.     overflow: hidden;
  20.     margin-left: auto;
  21.     margin-right: auto;
  22.     /*margin-bottom: -200px;
  23.     margin-top:50%;*/
  24. }
  25. #top{
  26.     height: 185px;
  27.     width: 380px;
  28.     background-color: #000;
  29.     margin: 10px 10px 10px 10px;
  30.  
  31.  
  32. }
  33.  
  34. #top_left{
  35.     height: 185px;
  36.     width: 185px;
  37.     background-color: #0191B8;
  38.     margin-right: 5px;
  39.     float: left;
  40.  
  41. }
  42. #top_right{
  43.     height: 185px;
  44.     width: 185px;
  45.     background-color: #D6F40B;
  46.     margin-left: 5px;
  47.     float: left;
  48. }
  49. #bottom{
  50.     height: 185px;
  51.     width: 380px;
  52.     background-color: #000;
  53.     margin: 10px 10px 10px 10px;
  54.  
  55. }
  56.  
  57. #bottom_left{
  58.     height: 185px;
  59.     width: 185px;
  60.     background-color: #00A414;
  61.     margin-right: 5px;
  62.     float: left;
  63.  
  64. }
  65. #bottom_right{
  66.     height: 185px;
  67.     width: 185px;
  68.     background-color:#FF0404;
  69.     margin-left: 5px;
  70.     float: left;
  71. }
  72. #img{
  73.  
  74.      position: relative;
  75.      top: -215px;
  76.      left: 0px;
  77.  
  78. }
[PHP] pobierz, plaintext


Wszystko mi działa jak chcę tylko nie mogę wyśrodkować całości (div id=all) w pionie.

Parametr vertical-align: middle; nie reaguje, div dosunięty jest w tedy do górnej krawędzi okna.
Ten sam efekt w Firefox, Chrome, IE.
Proszę o pomoc.
pedro84
12.05.2010, 13:16:26
Ban? Google.pl => vertical div center
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.