Html 3幅并排的图像，每幅图像上方都有文字（每幅图像上有2个单词，用换行符隔开），整个图像居中_Html_Css

Html 3幅并排的图像，每幅图像上方都有文字（每幅图像上有2个单词，用换行符隔开），整个图像居中

html css

Html 3幅并排的图像，每幅图像上方都有文字（每幅图像上有2个单词，用换行符隔开），整个图像居中,html,css,Html,Css,以下是相关代码。我有3张图片，需要在页面中间上方居中。每个按钮上方都需要一个标签，即两个单词，用换行符分隔（因为单词并排太长）。整个过程需要居中，每个按钮通过AJAX在“contentArea”div标记中加载一个页面。我尝试过textwrap和各种浮点方法，但我似乎无法让它以应有的方式工作。我可以在大约30秒内完成这项工作，但使用HTML和CSS似乎非常困难 <body> <div class = "header"> Usefull Tools

以下是相关代码。我有3张图片，需要在页面中间上方居中。每个按钮上方都需要一个标签，即两个单词，用换行符分隔（因为单词并排太长）。整个过程需要居中，每个按钮通过AJAX在“contentArea”div标记中加载一个页面。我尝试过textwrap和各种浮点方法，但我似乎无法让它以应有的方式工作。我可以在大约30秒内完成这项工作，但使用HTML和CSS似乎非常困难

<body>

    <div class = "header">
    Usefull Tools
    </div>

    <br><br><br><br><br>

        <div class = "titles">Measurement<br>Calculator</div>
        <br>
        <div class = "titles">Mortgate<br>Calculator</div>
        <br>
        <div class = "titles">Unknown<br>Tool</div>

        <div class = "button">
        <img id = "1" src = "images/Button_dark1.png" onmouseover="mouseOver(id)" 
            onmouseout = "mouseOut(id)" alt = "Button 1" width = "126" height = "128">

        <img id = "2" src = "images/Button_dark2.png" onmouseover="mouseOver(id)" 
            onmouseout = "mouseOut(id)" alt = "Button 2" width = "126" height = "128">

        <img id = "3" src = "images/Button_dark3.png" onmouseover="mouseOver(id)" 
            onmouseout = "mouseOut(id)" alt = "Button 3" width = "126" height = "128">

        </div>  

    <br><br><br><br><br><br><br><br><br><br>
        <div id = "contentArea"></div>

</body>

正如你在一篇评论中提到的，你正在学习一门关于高级网络技术的课程，这门课程不允许你使用旧的skool方式来做事情，例如表格等

从我看到的情况来看，HTML标记还有相当大的改进空间

除了在文本中添加换行符外，尽量避免使用

。对于布局级别间距（例如，在标题和正文内容之间有一个空格），请使用填充或边距

因此，标记可以重构为如下内容：

<div class="header">Usefull Tools</div>

<div class="buttons-group">
    ... some content that we want to space out from header and footer ...
</div>

<div class="footer"></div>

这将在按钮组上方和下方添加

40px

边距

好处是现在您可以轻松地更改间距，而无需添加或删除分隔符，并且它遵循了一种良好的模式，即使用CSS进行样式设置，使用HTML进行标记

接下来，您需要创建一个按钮，该按钮的标题跨越两行，下面有一个图像

下面的标记就足够了：

<a href="#" class="button">
    <span>Measurement<br />Calculator</span>
    <img src="http://placehold.it/126x128&text=Measurement+Button+Image" />
</a>

display:inline块

prperty用于确保应用于

标记的

按钮

类正确理解

边距

值

以下是完整的HTML和CSS，可用于实现所需的布局：

HTML

<div class="header">Usefull Tools</div>

<div class="buttons-group">
    <a href="#" class="button">
        <span>Measurement<br />Calculator</span>
        <img src="http://placehold.it/126x128&text=Measurement+Button+Image" />
    </a>

    <a href="#" class="button">
        <span>Mortgate<br />Calculator</span>
        <img src="http://placehold.it/126x128&text=Mortgate+Calculator" />
    </a>

    <a href="#" class="button">
        <span>Unknown<br />Tool</span>
        <img src="http://placehold.it/126x128&text=Unknown+Tool" />
    </a>
</div>

<div id="content-area"></div>

小提琴

可能会帮助您编写更好的HTML和CSS

祝你好运：）

你能在这里或JSFIDLE中提供你的CSS规则吗？如果你能在表格中提供，就在表格中提供。对我来说，这张桌子看起来很有用（我知道有很多人的想法不同，但这是我的观点）我没有太多CSS的东西，因为它不起作用。今晚到家后，我会发布我所拥有的内容。不，表格不是一个选项，这是一门关于高级网络技术的课程，一门400级大学的高级课程。表格不再用于页面布局的原因很多，而不仅仅是一种意见。这非常有效。非常感谢。我们现在就开始玩这个游戏，让它的其他部分看起来和这个一样好。

<a href="#" class="button">
    <span>Measurement<br />Calculator</span>
    <img src="http://placehold.it/126x128&text=Measurement+Button+Image" />
</a>

.button {
     display:inline-block;   
     vertical-align:top;
     text-decoration:none;
     color:black;
     margin:0 30px;
}

<div class="header">Usefull Tools</div>

<div class="buttons-group">
    <a href="#" class="button">
        <span>Measurement<br />Calculator</span>
        <img src="http://placehold.it/126x128&text=Measurement+Button+Image" />
    </a>

    <a href="#" class="button">
        <span>Mortgate<br />Calculator</span>
        <img src="http://placehold.it/126x128&text=Mortgate+Calculator" />
    </a>

    <a href="#" class="button">
        <span>Unknown<br />Tool</span>
        <img src="http://placehold.it/126x128&text=Unknown+Tool" />
    </a>
</div>

<div id="content-area"></div>

.buttons-group {
    text-align:center;
    margin:40px auto;
    min-width:570px;
}

.button {
    display:inline-block;   
    vertical-align:top;
    text-decoration:none;
    color:black;
    margin:0 30px;
}

.button span {
     display:block;
     margin-bottom:3px;
     text-align:center;
}

.button img {
    display:block;
}