将html布局表转换为div标记和CSS_Html_Css

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

html css

将html布局表转换为div标记和CSS,html,css,Html,Css,我想将下表转换为一系列DIV标记，使用CSS进行样式化。我使用过文本对齐，熟悉显示：块和边距：自动键入技巧，但没有什么能提供与此简单表格布局相同的结果： <table width="100%"> <tr> <td align="center"> <div>some objects</div> </td> </tr> </table> 一些物体使用我熟悉的其他

我想将下表转换为一系列

DIV

标记，使用CSS进行样式化。我使用过

文本对齐

，熟悉

显示：块

和

边距：自动

键入技巧，但没有什么能提供与此简单表格布局相同的结果：

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


一些物体

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

您应该能够使用这样的div

HTML

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

要使子元素居中（我猜也是

div

元素），需要做两件事

.example {
    text-align: center;
}

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

如果你能给我看一下你的标记，我会说得更具体一些-也许是在一张纸上。

你应该可以使用这样的div

HTML

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

要使子元素居中（我猜也是

div

元素），需要做两件事

.example {
    text-align: center;
}

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

如果您能向我展示您的标记，我可以更具体一些-可能是在一张地图上。

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

<div>some objects</div>

不需要更多的绒毛<代码>文本对齐基本上使内容居中，因此您可以将其他元素放置到该div中，这些元素会自动完全居中

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

<div>some objects</div>

不需要更多的绒毛<代码>文本对齐基本上使内容居中，因此您可以将其他元素放置到该div中，这些元素会自动完全居中

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

看

您只需使用

text align:center

CSS将内部内容居中对齐即可

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

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

看

您只需使用

text align:center

CSS将内部内容居中对齐即可

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

您可以使用

display:table


一些物体
.桌子{
显示：表格；
宽度：100%；
边框：1px纯蓝色；
}
.行{
显示：表格行；
边框：1px纯红；
}
.细胞{
显示：表格单元格；
边框：1px纯绿色；
}

请参阅。
您可以使用显示：表格


一些物体
.桌子{
显示：表格；
宽度：100%；
边框：1px纯蓝色；
}
.行{
显示：表格行；
边框：1px纯红；
}
.细胞{
显示：表格单元格；
边框：1px纯绿色；
}

请参阅。
我在这里用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>


#运输署{
文本对齐：居中；
}
一些物体
一些物体

请运行上面的代码。两者的显示方式相同。如果以上内容不是您想要的，那么您可以展示您尝试过的内容吗？
我在这里用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>


#运输署{
文本对齐：居中；
}
一些物体
一些物体

请运行上面的代码。两者的显示方式相同。如果以上内容不是您想要的，那么请您展示您尝试过的内容。
您可以使用文本对齐：居中
在不知道对象宽度的情况下将对象居中放置在父容器中。
您可以使用文本对齐：居中
将对象居中放置在父容器中，而不知道对象的宽度。
边距：0自动无论如何都能完美工作。如果您遇到这种情况，请尝试使用text align:center
div{margin: 0 auto; text-align: center;} /* Replace div to your selector. */

可以使用文本对齐后：左如果您喜欢其他人。
边距：0自动无论如何都能完美工作。如果您遇到这种情况，请尝试使用text align:center
div{margin: 0 auto; text-align: center;} /* Replace div to your selector. */

可以使用文本对齐后：左如果您喜欢其他人。
用于将html布局表转换为div标记和CSS。我提到过它是免费的吗？
用于将html布局表转换为div标记和CSS。我说过它是免费的吗？什么不起作用？你希望“一些对象”应该位于父容器的中心，这就是全部吗？是的，我想把父对象中的对象集中在不知道对象宽度的情况下。可以考虑发布你尝试的内容，因为你给出了答案。使用margin:auto和text align:center会起作用什么不起作用？你希望“一些对象”应该位于父容器的中心，这就是全部吗？是的，我想把父对象中的对象集中在不知道对象宽度的情况下。可以考虑发布你尝试的内容，因为你给出了答案。使用margin:auto和text-align:center会起作用。你真的不需要为那1个div嵌套4个div，但它仍然不是cente
<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>

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