HTML按钮布局定位答案

【问题标题】：HTML button layout positioningHTML按钮布局定位
【发布时间】：2014-01-27 22:47:28
【问题描述】：

我正在尝试使用标准 HTML 或 HTML 5 创建门户网站页面。我了解 HTML 的概念，但是来自软件背景的我在布局更复杂的部分等方面确实有点困难。

布局的基本前提非常简单：居中的图像，周围有许多按钮。我在按钮的布局上遇到了困难。

布局的可视化表示：

http://imgur.com/edit

目前，中心图像正在显示，但我很难定位按钮元素。

我对如何布局网页有点困惑。我应该有一个居中的<div> 标签和<buttons elements surrounding this>，还是居中的还有一堆其他居中的<div>s。

另外，如果有使用 HTML5 解决这个问题的更精细的方法，我会非常有兴趣了解它。

非常感谢，
J

HTML 代码

<head><link rel="stylesheet" type="text/css" href="theme.css"></head>
<html>
<body>

    <h1>Web Portal</h1>

    <div class="globe" align="center">
        <img src="center_img.png" alt="logo" height="420" width="420">
    </div>
    <div class="button" align="center">
        <button type="Button">Click me!</button>
    </div>
</body>
</html>

【问题讨论】：

我不明白您的示例代码和您的视觉表示之间的链接。你到底想要什么？
我希望有一个反映视觉表示的布局，提供的代码只是我迄今为止的方法的一个示例。

标签： html button layout

【解决方案1】：

即使我没有得到你想要的。但是对于被按钮包围的图像，请尝试此代码

<body>

<h1>Web Portal</h1>

<table align="center">
    <tr>
        <td><button type="Button">Click me!</button></td>
        <td align="center" ><button type="Button">Click me!</button></td>
        <td><button type="Button">Click me!</button></td>
    </tr>
    <tr>
        <td><button type="Button">Click me!</button></td>
        <td><img src="center_img.png" alt="logo" height="420" width="420"></td>
        <td><button type="Button">Click me!</button></td>
    </tr> 
    <tr>
        <td><button type="Button">Click me!</button></td>
        <td align="center" ><button type="Button">Click me!</button></td>
        <td><button type="Button">Click me!</button></td>
    </tr>         
</table>

【讨论】：

感谢 Jithin 的回答，但它不是我想要的。我在原始帖子的图片中包含了一个示例:)
您在图片中显示的布局也可以通过使用 s 和 s 的表格布局来实现。您还可以在 s. 中添加更多表格