代码之家 › 专栏 › 技术社区 › Paul Keister

CSS使内容居中的适当方式

html-table css-float css

Paul Keister · 技术社区 · 17 年前

我更喜欢使用基于CSS的设计,但是作为一个后端程序员,我的CSS技能有点弱。当我涉及到布局时,我倾向于回到基于表的格式,因为我的思想被多年来基于表的滥用所扭曲。有一个特别的问题,我总是绊倒。什么是最好的CSS替代:

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

我有时使用:

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

但这似乎不太正确。我不是要对齐文本,而是要对齐内容。此外,这似乎对封闭元素的文本对齐有影响,这需要进行调整来修复。我不明白的一件事是:为什么没有浮球:中心样式?这似乎是最好的解决办法。希望,我遗漏了一些东西,并且有一个完美的CSS方法来实现这一点。

6 回复 | 直到 11 年前

Joe Phillips 11 年前

你说得对 text-align 用于对齐文本。实际上,只有Internet Explorer允许您将文本以外的任何内容置于中心。任何其他浏览器都能正确处理此问题,并且不允许块元素受 水平对齐 .

使用CSS将块元素居中 margin: 0 auto; 就像乔·菲利普斯建议的那样。尽管你根本不需要保留桌子。

为什么没有 float: center; 浮动是指将元素(通常是图像)放置在左侧或右侧,并使文本围绕这些元素流动。在此上下文中,在中心位置浮动某些内容是没有意义的,因为这意味着文本必须在元素的两侧流动。

Joe Phillips 17 年前

我建议你把 <div> 进入你 <td> 并将样式属性设置为 style="width: 200px; margin: 0 auto;"

关键是你必须设定一个固定的宽度。

编辑: 在重新考虑这个问题之后,我建议把桌子全部报废。只使用一个 <div style="width: 200px; margin: 0 auto;> 就像我建议的那样,不需要一张桌子。

Ross Goddard 17 年前

这里有一个很好的资源,可以使用CSS集中。
http://www.w3.org/Style/Examples/007/center
这演示了如何将文本、块、图像居中以及如何将它们垂直居中。

Michael Wales 17 年前

你通常在哪里做这些?对我来说-我经常尝试把整个网站的设计放在中心位置,所以我通常这样做:

<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;}

这将使页面上的整个设计以980px的宽度居中,同时仍保持所有文本左对齐(只要该文本在 #wrapper 元素)。

Paul Sweatte 13 年前

使用 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>

Chad Birch 17 年前

男孩的回答是正确的,正确的方式,以中心的事情。

要回答您的另一条评论,“另外,这似乎对封闭元素的文本对齐产生了影响,这需要进行调整才能解决。”这是CSS工作的本质,在元素上设置属性会影响其所有子元素,除非属性被其中一个元素覆盖(假设属性是 inherited 当然。