Frage Text in der Tabellenzelle zentrieren


Ich kann die Antwort auf mein Problem nicht finden. Ich habe eine Tabelle mit zwei Zeilen und zwei Spalten (wie der unten gezeigte Code), wie zentriere ich den Text in bestimmten Zellen. Ich möchte den Text in einer oder zwei der Zellen zentrieren - nicht in allen Zellen.

<div style="text-align: center;">
    <table style="margin: 0px auto;" border="0">
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</div>

28
2017-10-03 21:57


Ursprung


Antworten:


Ich würde empfehlen, CSS dafür zu verwenden. Sie sollten eine CSS-Regel erstellen, um die Zentrierung zu erzwingen, zum Beispiel:

.ui-helper-center {
    text-align: center;
}

Und dann füge die hinzu ui-helper-center Klasse für die Tabellenzellen, für die Sie die Ausrichtung steuern möchten:

<td class="ui-helper-center">Content</td>

BEARBEITEN: Da diese Antwort akzeptiert wurde, fühlte ich mich verpflichtet, die Teile, die zu einem Flammenkrieg führten, in den Kommentaren zu bearbeiten und keine schlechten und überholten Praktiken zu fördern.

Sehen Gabe's Antwort wie Sie die CSS-Regel in Ihre Seite einbinden können.


45
2017-10-03 21:59



Wie wäre es mit einfach (Bitte beachten Sie, ein besserer Name für den Klassennamen ist dies nur ein Beispiel):

.centerText{
   text-align: center;
}


<div>
   <table style="width:100%">
   <tbody>
   <tr>
      <td class="centerText">Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td class="centerText">Cell 3</td>
      <td>Cell 4</td>
    </tr>
    </tbody>
    </table>
</div>

Beispiel Hier

Sie können die css in einer separaten Datei, die empfohlen wird. In meinem Beispiel habe ich eine Datei namens. Erstellt styles.css und legte meine css Regeln drin. Dann schließe es in das HTML-Dokument in der <head> Abschnitt wie folgt:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>

Die Alternative, keine separate css-Datei zu erstellen, wird überhaupt nicht empfohlen ... Erstellen <style> Block in deinem <head> im HTML-Dokument. Dann lege deine Regeln dort hin.

<head>
 <style type="text/css">
   .centerText{
       text-align: center;
    }
 </style>
</head>

6
2017-10-03 21:59