Vertikale Ausrichtung im DIV-tag

Hi alle,
vertical-align:middle funktioniert nicht in div. Können Sie bitte den Fehler in meinem code. Ich möchte zum ausrichten der text in DIV-tag ohne Nutzung oben,Links Eigenschaften.Antworten Sie bitte so bald wie möglich.....
Vielen Dank im Voraus,

Hier ist mein code.....

 <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
    body{
    font-size:0.7em;
    font-family:Arial;
    }
    .TimeFrame,.YearFrame,.QuarterFrame,.MonthFrame,.Year,.Quarter,.Month,.PrevYear,.NextYear{
     position:absolute;
     height:20px;
    }
    .YearFrame,.QuarterFrame,.MonthFrame{
      border:1px solid black; 
      border-radius:4px;   
    }

    .TimeFrame{
     top:10px;
     width:716px;
    }

    .YearFrame{    
      width:145px;  
      left:17px;
    }

    .QuarterFrame{
      width:121px;  
      left:200px;
    }

    .MonthFrame{
     width:439px;
     left:330px;
    }

    .Year,.Quarter,.Month{
      cursor:pointer;
      border-right:1px solid black;
      vertical-align:middle;
    }
    .Year{
     padding:0px 8px; 0px 8px;
    }
    .Quarter{
     padding:0px 5px; 0px 5px;
    }

    .Month{
     padding:0px 6px; 0px 6px;
    }

    .PrevYear{
      left:0px;
      top:2px;
    }
    .NextYear{
      left:165px;
      top:2px;
    }

    </style>
    </HEAD>

    <BODY>
    <div class="TimeFrame">
    <div class="PrevYear"><img src="round_arrow_left.png" alt="Previous" title="Previous"></div>

    <div class="YearFrame">
     <div class="Year" style="left:1px;">2000</div>
     <div class="Year" style="left:49px;">2001</div>
     <div class="Year" style="left:97px;border:none;">2002</div> 
    </div>
    <div class="NextYear"><img src="round_arrow_right.png" alt="Next" title="Next"></div>

    <div class="QuarterFrame">
     <div id="Q1" class="Quarter" style="left:1px;">Q1</div>
     <div id="Q2" class="Quarter" style="left:31px;">Q2</div>
     <div id="Q3" class="Quarter" style="left:61px;">Q3</div>
     <div id="Q4" class="Quarter" style="left:91px;border:none;">Q4</div>
    </div>

    <div class="MonthFrame">
     <div id="JAN" class="Month" style="left:1px;">Jan</div>
     <div id="FEB" class="Month" style="left:37px;">Feb</div>
     <div id="MAR" class="Month" style="left:74px;">Mar</div>
     <div id="APR" class="Month" style="left:111px;">Apr</div>
     <div id="MAY" class="Month" style="left:146px;">May</div>
     <div id="JUN" class="Month" style="left:185px;">Jun</div>
     <div id="JUL" class="Month" style="left:221px;">Jul</div>
     <div id="AUG" class="Month" style="left:252px;">Aug</div>
     <div id="SEP" class="Month" style="left:290px;">Sep</div>
     <div id="OCT" class="Month" style="left:328px;">Oct</div>
     <div id="NOV" class="Month" style="left:363px;">Nov</div>
     <div id="DEC" class="Month" style="left:401px;border:none;">Dec</div>
    </div>
    </div>
    </BODY>

    </HTML>

InformationsquelleAutor Rama Rao M | 2012-02-08

  1. 3

    Ist es möglich vertical-align:middle kombiniert mit display:table-cell um diesen Effekt zu erzielen.

    Wickelte ich jedes deiner Jahre in einem span und verwendet diese CSS:

    .Year {
  display:table;
}
.Year span {
  display:table-cell;
  vertical-align:middle;
}

    Sehen fiddle hier: http://jsfiddle.net/stephendavis89/7QPx8/1/ (nur die Jahre sind vertikal zentriert)

    P. S. möchten Sie vielleicht zu prüfen, Links schweben Ihre Jahre, Quartale und Monate anstatt Links positionieren.

    InformationsquelleAutor Steve Davis

  2. 0

    vertical-align ist nicht dazu da, um die Ausrichtung in inline-Elemente wie. Für ein besseres Verständnis von dem, was Sie tut und nicht tun, schauen Sie sich diese Seite. Im Grunde vertical-align bestimmt ist, um die alten zu ersetzen valign-Attribut für Elemente oder das align-Attribut für Dinge wie Elemente. Was es nicht tun werde, ist vertikal ausrichten von text in einem div. Sie müssen dies tun, durch Polsterung oder Positionierung.

    http://phrogz.net/css/vertical-align/index.html

    InformationsquelleAutor Brian

Schreibe einen Kommentar