Geek Answers Handbook

CSS Corresponding Content Center Path

I prefer working with CSS-based design, but like more code, my CSS skills are a little weak. When I go in for layout, I tend to return to table-based formatting because my mind has been distorted by years of table-based abuse. There is one specific problem that I always travel with. What is the best CSS alternative:

<table width="100%">
    <tr>
        <td align="center">
            content goes here
        </td>
    </tr>
</table>

I sometimes use:

<div style="width:100%; text-align:center">content</div>

But that does not seem right. I am not trying to align text, I am trying to align content. Also, this seems to affect the alignment of the text of the private elements, which needs to be fixed to fix it. The only thing I don’t understand is: why is there no float: center style? It seems like this would be a better solution. Hope I missed something, and there is a perfect CSS way for this.

+5
6

, text-align . Internet Explorer, -, . text-align.

, css, margin: 0 auto; , . .

, float: center;, , ( , ) , . - , , .

+10

<div> <td> style="width: 200px; margin: 0 auto;"

, .

Edit: , . <div style="width: 200px; margin: 0 auto;>, , .

+5

? - , :

<html>
  <body>
  <div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
  </body>
</html>


body {text-align:center;}
#wrapper {margin:0 auto; text-align:left; width:980px;}

980 , ( #wrapper).

+1

display:inline-block text-align:center :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Centering</title>

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

  /* Percentage width */
  .wrapper { width: 99%; }

  /* Use inline-block for wrapper */
  .wrapper { display: inline-block; }

  /* Use inline for content */
  .content { display:inline; }
  </style> 

</head>
<body>
  <div class="container">
    <div class="content">
        <div class="wrapper">
            <div>abc</div>
            <div>xyz</div>
        </div>
    </div>
  </div>
</body>
</html>
+1

d03boy .

To answer your other comment, "Also, this seems to affect the alignment of the text of the private elements, which requires correction to fix it." That the nature of the CSS operation that sets a property in an element affects all its children if the property is not overridden by one of them (it is assumed that the inherited property is of course).

0
source

More articles:


All Articles