Was ist die korrekte Verwendung von 'align' vs. 'text-align'

Ich versuche herauszufinden, den Unterschied zwischen dem einfügen einer align-Attribut auf eine Zelle in der Tabelle vs mit text-align, css-Attribut. Der code unten zeigt unterschiedliche Ergebnisse bei IE vs Andere. In IE, das richten endet ausrichten jedes sub-Kind, so dass der text 'test' wird zentriert ausgerichtet, während in FF/Webkit ist dies nicht der Fall, und es bleibt Linksbündig. Was ist das richtige Verhalten?

<!DOCTYPE html>
<html>

 <head>
  <style>
   table { width: 60%; }
   table td { border: 1px solid black; }
  </style>
 </head>

 <body>
  <table>
   <tbody>
    <tr>
     <td align='center'>
      <table>
       <tbody>
        <tr>
         <td>test</td>
        </tr>
       </tbody>
      </table>
     </td>
    </tr>
   </tbody>
  </table>
 </body>

</html>
  • Es gibt zwei Fragen hier. css-v. html und richten v. text-align. die Antwort erstreckt sich über die ersten.
InformationsquelleAutor Darth | 2010-09-22
  1. 9

    Das align-Attribut ist im alten Stil-tag-soup "HTML". Lieber CSS-styling, als mit 

    <td style="text-align:center">
<!-- Content -->
</td>

    Besser noch, gib dem TD eine className, und dann den Stil in der stylesheet.

    InformationsquelleAutor Robusto
  2. 1

    CSS:text-align und HTMLElement.align-Eigenschaft funktioniert anders, wenn es block-Elemente(Z.B. Tabellen) als Kinder, so ersetzen Sie Sie mit Vorsicht.

    Sehen Sie sich diese demo unten für Referenz.

    CSS:

    .Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }

.CenterSelf { margin: auto }

.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }


.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }

    HTML:

    <table class="Container" align="center">
    <tr><td>TABLE1</td></tr>
    <tr>
        <td>
            <p>This is a paragraph.</p>
            <table>
                <tr>
                    <td>This is a children table.</td>
                </tr>
            </table>
            <div>This is a div.</div>
        </td>
    </tr>
</table>
<hr />
<table class="Container" style="text-align: center">
    <tr><td>TABLE2</td></tr>
    <tr>
        <td>
            <p>This is a paragraph.</p>
            <table>
                <tr>
                    <td>This is a children table.</td>
                </tr>
            </table>
            <div>This is a div.</div>
        </td>
    </tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
    DIV1
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
    DIV2
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
    DIV3
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
    DIV4
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <td>This is a children table.</td>
        </tr>
    </table>
    <div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
    <tr>
        <td>&nbsp;</td>
        <td colspan="2">TABLE</td>
        <td colspan="2">DIV</td>
    </tr>
    <tr>
        <td>Elements</td>
        <td>align="center"</td>
        <td>style=&quot;text-align: center&quot;</td>
        <td>align="center"</td>
        <td>style=&quot;text-align: center&quot;</td>
    </tr>
    <tr>
        <td>Self</td>
        <td>O</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
    </tr>
    <tr>
        <td>inline child</td>
        <td>X</td>
        <td>O</td>
        <td>O</td>
        <td>O</td>
    </tr>
    <tr>
        <td>inline child of inline child</td>
        <td>X</td>
        <td>O</td>
        <td>X</td>
        <td>O</td>
    </tr>
    <tr>
        <td>block child</td>
        <td>X</td>
        <td>X</td>
        <td>O</td>
        <td>X</td>
    </tr>
    <tr>
        <td>inline child of block child</td>
        <td>X</td>
        <td>O</td>
        <td>O</td>
        <td>O</td>
    </tr>
</table>
O: Centered
X: Not centered

    InformationsquelleAutor Vinix
Schreibe einen Kommentar