rechts in einer Tabellenzelle mit CSS ausrichten

128

Ich habe den alten klassischen Code so

<td align="right">

Das macht, was es sagt: Es richtet den Inhalt in der Zelle richtig aus. Wenn ich also 2 Schaltflächen in diese Zelle einfüge, werden sie an der richtigen Stelle der Zelle angezeigt.

Aber dann habe ich dies auf CSS umgestaltet, aber es gibt keine richtige Ausrichtung? Ich sehe Textausrichtung, ist das das gleiche?

css

— Michel
quelle

154

Verwenden

text-align: right

Die CSS-Eigenschaft "Text ausrichten" beschreibt, wie Inline-Inhalte wie Text in ihrem übergeordneten Blockelement ausgerichtet werden. Textausrichtung steuert nicht die Ausrichtung von Blockelementen selbst, sondern nur deren Inline-Inhalt.

Sehen

Textausrichtung

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

— rahul
quelle

5

Ist ein <input type = "button"> ein Blockelement, weil dieses nicht richtig ausgerichtet wird?

— Michel

1

Es hängt davon ab, ob. Ich habe einen Absatz, der blockiert ist, in einer Tabellenzelle (CSS-Anzeige: Tabellenzelle), und wenn ich diesem Absatz eine Breite von 100% gebe, beginnt er, die Textausrichtung nach rechts zu respektieren. Ich gehe davon aus, dass das Definieren einer Breite nicht immer das Beste ist.

— Costa

3

Ich gehe dann davon aus, dass die Eigenschaft text-alignnicht sehr gut benannt ist, wenn sie für Schaltflächen und Steuerelemente sowie Text gilt. Vielleicht hätte das heißen sollen content-align?

— Ben

3

Michel: Setze das Blockelement auf Inline-Block, zB: td input {display: inline-block; }

— Shalamos

1

oder ich arbeite nur float: rechts oder gut alt align = "right". wtf?

— Ton Škoda

7

Was jetzt für mich funktioniert hat ist:

CSS:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

Siehe die folgende Geige:

http://jsfiddle.net/Joysn/3u3SD/

— Joysn
quelle

6

Vergessen Sie nicht den CSS3-Selektor "n-tes Kind". Wenn Sie den Index der Spalte kennen, an der Sie den Text rechtsbündig ausrichten möchten, können Sie ihn einfach angeben

table tr td:nth-child(2) {
    text-align: right;
}

In Fällen mit großen Tabellen können Sie viel zusätzlichen Aufschlag sparen!

Hier ist eine Geige für dich ... https://jsfiddle.net/w16c2nad/

— Suite 404 nicht gefunden
quelle

Großartig: einfachste und sauberste Lösung, die ich gesehen habe.

— Ncrypticus

2

So positionieren Sie Blockelemente in einer `td`Zelle

Die Antworten machen einen großartigen Job, um Text in einer tdZelle richtig auszurichten .

Dies ist möglicherweise nicht die Lösung, wenn Sie ein Blockelement wie in der akzeptierten Antwort kommentiert ausrichten möchten. Um dies mit einem Blockelement zu erreichen, habe ich es nützlich gefunden, Ränder zu verwenden.

allgemeine Syntax

selector {
  margin: top right bottom left;
}

Recht rechtfertigen

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

Zentrum rechtfertigen

td {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

im Zentrum anordnen

td {
  margin: auto;
}

JS Fiddle Beispiel

Alternativ können Sie den tdInhalt anzeigen lassen, inline-blockwenn dies eine Option ist. Dies kann jedoch die Position der untergeordneten Elemente verzerren.

— John Mutuma
quelle