Question

以下是相关代码。我有3张图片，需要居中在页面中间。每个按钮上面都有一个标签，它是2个单词，由换行符分隔（因为单词并排太长）。整个事物需要居中，每个按钮通过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>

这是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;
}

Answer 1

正如你在其中一篇评论中提到的那样，你正在开设一门关于高级网络技术的课程，这门课程不会让你使用老式的做事方式，即。表等。

从我所看到的，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属性用于确保button标记上应用的a类正确理解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;
}

FIDDLE http://jsfiddle.net/Varinder/4KGAC/4/

These Resourses可以帮助您编写更好的HTML和CSS

3个图像并排显示每个文本（每个2个单词，以换行符分隔），整个事物居中

1 个答案: