3张图片并排，每个图片上方都有文字(每个图片2个单词，用换行符分隔)，整个图片居中

下面是相关的代码。我有3张图片，它们需要在页面中间上方居中。每个按钮上方都需要一个标签，标签是两个单词，用换行符分隔(因为单词并排太长)。整个过程需要居中，每个按钮通过AJAX在"contentArea"div标记中加载一个页面。我尝试过文本换行和各种浮动方法，但似乎无法使其正常工作。我可以在大约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;
}

正如您在一条评论中提到的，您正在学习一门关于高级Web技术的课程，该课程不允许您使用旧的skool方式来做事情，例如表格等。

据我所见，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;
}

这将在buttons-group之上和之下添加40px裕度

现在的好处是，你可以很容易地更改间距，而不必添加或删除中断，它遵循了使用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属性用于确保应用于a标签的button类正确理解margin值

以下是完整的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;
}

FIDDLEhttp://jsfiddle.net/Varinder/4KGAC/4/

这些资源可以帮助您编写更好的HTML和CSS

祝你好运：)

相关内容

最新更新

热门标签：