Question

我想将下表转换为一系列DIV标记，使用CSS设置样式。我使用过text-align，熟悉display: block;和margin: auto类型技巧，但没有什么能比这个简单的表格布局给出相同的结果：

<table width="100%">
  <tr>
    <td align="center">
      <div>some objects</div>
    </td>
  </tr>
</table>

使用我熟悉的其他方法的问题是，他们依赖于我知道我试图对齐的对象的宽度 - 我不知道。我希望能够将任意宽的对象居中，例如按钮和图像。

Answer 1

无论如何，

margin: 0 auto;完美无缺。如果您遇到此问题，请尝试使用text-align: center;

div{margin: 0 auto; text-align: center;} /* Replace div to your selector. */

如果您愿意，可以使用text-align: left;。

Answer 2

你应该可以使用这样的div ......

HTML

<div class="example">
    Some objects!
</div>

CSS

.example {
    width: 60%;
    margin: 0 auto;
}

我有点猜测你只是在使用该表以使div标签出现在屏幕中间 - 边距样式就是这样。

要将子元素（我猜也是div元素）居中，您需要做两件事。

.example {
    text-align: center;
}

.example .button {
    display: inline-block;
}

如果你能告诉我你的标记，我可以更具体一些 - 也许是JSFiddle。

Answer 3

您正在做的事情可以通过以下方式实现：

<div>some objects</div>

的CSS：

div{
    text-align:center;
}

不再需要模糊。 text-align基本上将内容集中在一起，因此您可以将其他元素放入到自动完全居中的div中。

Demo

Answer 4

如果您只想让内部div位于外部容器的中心，您可以简单地执行此操作（不使用表）：

<div class="parent">
   <div>some objects</div>
</div>

.parent的位置：

.parent
{
    text-align: center;
    width: 100%;
}

请参阅this fiddle。

您只需使用text-align:center CSS来集中调整内部内容。

请注意，父容器必须有足够的宽度才能在左端和右端显示可见空格。

Answer 5

您可以使用display:table;

http://jsfiddle.net/3Z4E8/

<div class"table">
  <div class="row">
    <div class="cell" style="text-align:center">
      <div>some objects</div>
    </div>
  </div>
</div>


.table {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
.row {
    display: table-row;
    border: 1px solid red;
}
.cell {
    display: table-cell;
    border: 1px solid green;
}

请参阅docs。

Answer 6

我在这里使用CSS和div s：

尝试了您的代码

<html>
    <head>
        <style>
            #td{
                text-align:center;
            }
        </style>
    </head>

    <body>
        <table width="100%">
            <tr>
                <td align="center">
                    <div>some objects</div>
                </td>
            </tr>
        </table>

        <div id="table">
            <div id="td">
                Some objects
            </div>
        </div>
    </body>
</html>

请运行以上代码。两者都以相同的方式显示。如果以上不是您想要的，那么请您展示您的尝试吗？

Answer 7

您可以使用text-align: center;将对象置于父容器中心，而无需了解对象的宽度。

Answer 8

使用tabletodivconverter.com将html布局表转换为div标签和CSS。我提到它是免费的吗？

将html布局表转换为div标签和CSS

8 个答案: