All geek questions in one place

What is the proper use of 'align' vs 'text-align'

I am trying to understand the difference between putting the align attribute in a table cell vs using the css text-align attribute. The code below shows different results in IE vs Others. In IE, alignment ends with the alignment of each child of the child, so the text 'test' is centered, whereas in FF / Webkit this is not the case and it remains left aligned. What is the correct behavior?

<!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>
+3
source share
2 answers

The align attribute is the HTML style of the HTML style. Prefer CSS style e.g.

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

Even better, give the TD className and set this style in the stylesheet.

+8

CSS: text-align HTMLElement.align -, (: ), .

. .

.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 }
<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
Hide result
0

Source: https://habr.com/ru/post/1766105/

More articles:


All Articles