wie man Elemente im td-Tag vertikal ausrichtet

Lesezeit: 3 Minuten

Benutzeravatar von CleanBold
CleanBold

Ich möchte 3 Elemente in meinem ausrichten <td> Tag vertikal in der Mitte/Mitte. Dies sind die Elemente, die ich ausrichten möchte:

  1. Bildschaltfläche (ein Tag) oberes Pfeilbild
  2. jquery-Schieberegler
  3. Bildschaltfläche (ein Tag) unteres Pfeilbild

Im Wesentlichen sind die Elemente zum vertikalen Scrollen eines Diagramms da. Sie sind etwas falsch ausgerichtet. Ich möchte, dass sie alle im Mittelpunkt stehen.

Mein aktueller Code lautet:

<td style="vertical-align:top;">                
  <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;">
    <a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a>
  </div>
  <div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div>
  <div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;">
    <a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a>
  </div>
</td>

Ich bin offen dafür, das div-Tag im Zusammenhang mit Bildschaltflächen zu entfernen, aber das td-Tag sollte dort bleiben.

  • Es gibt kein horizontal-align CSS-Eigenschaft.

    – Alex

    31. Mai 2011 um 4:34 Uhr

  • Die beiden Ausrichtungseigenschaften für CSS sind text-align (für horizontal) und vertical-align (für vertikal)

    – verdrahtet00

    31. Mai 2011 um 4:43 Uhr


  • Wäre hilfreich, wenn du ein Bild einstellen könntest, wie du es haben möchtest

    – JohnP

    31. Mai 2011 um 5:03 Uhr

  • Ich habe die Antwort gefunden, ich werde sie nach 8 Stunden einreichen, da das Einreichen von Selbstantworten eingeschränkt ist. Wir müssen nur das Attribut align=center zum Haupt-td-Tag hinzufügen.

    – CleanBold

    31. Mai 2011 um 5:24 Uhr

Lesen Sie mehr über die vertikale Ausrichtung in Tabellenzellen hier

vertical-align:middle
vertical-align:top
vertical-align:bottom

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

Benutzeravatar von CleanBold
CleanBold

Vielen Dank an alle für Ihre Hilfe. Ich habe die Antwort selbst gefunden. Das ist der neue Code. Nur das td-Tag wurde geändert, um ein zusätzliches Attribut align=center hinzuzufügen. Dadurch werden alle Elemente innerhalb des td-Tags in der Mitte ausgerichtet.

<td align="center" style="vertical-align:top;">             
    <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;">
     <a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a>
    </div>
    <div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div>
    <div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;">
     <a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a>
    </div>
</td>

A. Morels Benutzeravatar
A. Morel

Vorsichtig sein wenn es welche gibt mehrere Elemente im gleichen <TD>das Die vertikale Ausrichtung funktioniert nicht mehr, da die Ausrichtung an den verschiedenen Elementen vorgenommen wird, sondern zusammen!

Für die verschiedene Elemente sein vertikal zentriertSie müssen getrennt sein in ein neues <table> mit verschiedenen Spalten!

Zum Beispiel zu ausrichten ein Bild mit einer <span>:

Geben Sie hier die Bildbeschreibung ein

<td style="vertical-align:top;">                
  <div id="div1" style="display:inline-block; horizontal-align:center; margin-top:5px;">
    <div align="center"><a id="a_top" title="Top" class="ui-icon ui-icon-circle-triangle-n" style="border:0px;"></a>
      </div>
  </div>
  <div id="slider_y" style="height:240px; width:6px; horizontal-align:center; margin-top:10px; "></div>
  <div id="div2" style="display:inline-block;horizontal-align:center;margin-top:10px;">
    <div align="center"><a id="a_bottom" title="Bottom" class="ui-icon ui-icon-circle-triangle-s" style="border:0px;"></a>
      </div>
  </div>
</td>

Ich bin mir nicht sicher, ob ich es ganz verstehe, aber vielleicht so etwas?

1433800cookie-checkwie man Elemente im td-Tag vertikal ausrichtet

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy