下面是相关代码。我有 3 张图片，它们需要居中放置在页面中间上方。每个按钮上面都需要一个标签，这是 2 个单词，用换行符分隔(因为单词并排太长)。整个东西需要居中，每个按钮通过 AJAX 在“contentArea”div 标签中加载一个页面。我已经尝试过 textwrap 和各种 float 方法，但我似乎无法让它按应有的方式工作。我可以在大约 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>
这是css文件。
.center
{
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:18px;
}
.centerLeft
{
margin-left:33%;
font-family:"Lucida Console", Monaco, monospace;
}
.header
{
margin-left:auto;
margin-right:auto;
text-align:center;
font-size: 36px;
font-weight:700;
}
.titles
{
margin-left:auto;
margin-right:6px;
text-align:center;
font-size:20px;
font-weight:500;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
vertical-align:middle;
}
.button
{
margin-left:auto;
margin-right:6px;
text-align:center;
vertical-align:middle;
}
body
{
background-color:#faf8cb;
}
最佳答案
正如您在其中一条评论中提到的，您正在学习高级网络技术类(class)，该类(class)不会让您使用老式的做事方式，即。表格等
据我所知，您的 HTML 标记还有很大的改进空间。
- 尽量避免使用
<br />除了在文本中添加换行符之外的任何其他内容。对于布局级别间距(例如，在页眉和正文内容之间有一个空格)使用填充或边距。
因此，标记可以重构为如下所示:
<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>
.buttons-group类样式如下有一些间距:
.buttons-group {
margin:40px auto;
width:570px;
}
这将添加 40px上下边距buttons-group
现在的好处是您可以轻松更改间距而无需添加或删除分隔符，并且它遵循使用 CSS 进行样式设置和使用 HTML 进行标记的良好模式
- 接下来，您需要创建一个按钮，该按钮的标题横跨两行，下方有一张图片。
下面的标记就足够了:
<a href="#" class="button">
<span>Measurement<br />Calculator</span>
<img src="http://placehold.it/126x128&text=Measurement+Button+Image" />
</a>
..和相关的CSS ..
.button {
display:inline-block;
vertical-align:top;
text-decoration:none;
color:black;
margin:0 30px;
}
display:inline-block prperty 是为了确保 button应用于 a 的类标签理解 margin正确的值(value)观
下面是完整的 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>
CSS
.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;
}
FIDDLE http://jsfiddle.net/Varinder/4KGAC/4/
These Resourses可能会帮助你写出更好的 HTML 和 CSS
祝你好运:)
关于html - 3 张图片并排放置，每张图片上方有文字(每张 2 个词，以换行符分隔)，整个内容居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21669184/