1

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

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

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

4

8 回答 8

1

margin: 0 auto;无论如何都可以完美地工作。如果您有此问题，请尝试使用text-align: center;

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

text-align: left;如果您喜欢其他人，您可以使用之后。

于 2013-04-10T12:32:01.277 回答
0

div我在这里用 CSS 和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>

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

于 2013-04-10T10:56:14.470 回答
0

你应该能够使用这样的 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上。

于 2013-04-10T10:49:36.450 回答
0

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

<div>some objects</div>

CSS：

div{
    text-align:center;
}

不需要更多的绒毛。text-align基本上将内容居中，因此您可以将其他元素放入该 div 中，从而自动完美居中。

演示

于 2013-04-10T10:49:46.747 回答
0

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

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

在哪里.parent：

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

看到这个小提琴。

你只需要使用text-align:centerCSS 来居中对齐你的内部内容。

请注意，父容器必须有足够的宽度以在左右两端显示可见空间。

于 2013-04-10T10:50:52.780 回答
0

你可以使用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;
}

请参阅文档。

于 2013-04-10T10:51:37.980 回答
0

您可以text-align: center;在不了解对象宽度的情况下将对象居中放在父容器中。

于 2013-04-10T11:01:18.327 回答
0

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

于 2015-05-06T17:45:46.223 回答