Question

我有以下代码

<html>
<head>
<title>Test</title>
<style type="text/css">

<!--

body,td,th {

    color: #FFFFFF;

}

body {

    background-color: #000000;

}



#Pictures {

    position:absolute;

    width:591px;

    height:214px;

    z-index:1;

    left: 17%;

    top: 30%;

    text-align:center;

}

#Links {



    width:600px;

    height:30px;

    z-index:2;

    top: 184px;

    font-family: "Broadway", Broadway, monospace;

    font-size: 14px;

    color: #FFFFFF;

    text-align: center;



}

.links2 {

    font-family: Broadway;

    color: #FFFFFF;

    text-decoration: none;

}





a:links2, a:visited {

    color: #ffffff;

}



a:hover, a:active {

    color: #333333;

}

#Main {

    position:absolute;

    width:800px;

    height:600px;

    z-index:2;

    left: 15%;

    top: 10%;

    right: 15%;

    border-top-style: none;

    border-right-style: none;

    border-bottom-style: none;

    border-left-style: none;



}

#Logo {

    position:absolute;

    float: left;

    width:104px;

    height:100px;

    z-index:2;

}



</style>

</head>



<body>



<div id="Main">

<div id="Pictures">

<div>

<a href="1.html" ><img src="1.gif" alt="x" width="181" height="173" border="0" /></a>

<a href="1.html" class="links2">1</a>

</div>

<div>

<a href="2.html" class="links2"><img src="2.gif" alt="x" width="181" height="173" border="0" align="top" /></a>

<a href="2.html" class="links2">2</a>

</div>

<div>

<a href="3.html" class="links2"><img src="3.gif" alt="3" width="181" height="173" border="0" /></a>

<a href="3.html" class="links2">3</a> 

</div>

</div>

</div>

<div id="Logo"><img src="logo.gif" alt="x" width="104" height="100" border="0"/></div>

</div>

</body>

</html>

垂直显示图片层。

我正在努力使3个图像水平对齐，文本位于它们下方。为什么他们默认为垂直，我可以改变这种行为吗？

Answer 1

您实际上并不需要那么多代码来实现您的目标。例如：

<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>

<div id="images">
<a href="1.html" >
    <img src="1.gif" alt="x" width="181" height="173" border="0" /><br />
    One
</a>
<a href="2.html" >
    <img src="2.gif" alt="x" width="181" height="173" border="0" /><br />
    Two
</a>
<a href="3.html" >
    <img src="3.gif" alt="x" width="181" height="173" border="0" /><br />
    Three
</a>
<a href="4.html" >
    <img src="4.gif" alt="x" width="181" height="173" border="0" /><br />
    Four
</a>
</div>

让物品水平对齐而不是垂直对齐的技巧是“浮动”容器（左或右）。通过设置链接显示：block;您可以将它们用作容器，而不是将所有内容包装在额外的＆lt; div＆gt;中。我已将宽度设置为25％（或24.99％以避免在某些浏览器中出现舍入错误），以便它们在页面上均匀分布，但您可能需要使用边距/填充和/或容器上的宽度不同。另请注意，当您在主体{}上设置文本颜色时，除了链接之外，您不需要在其他地方再次指定它。对于font-family来说也是如此，尽管这也是由链接继承的。祝这个项目好运！

Answer 2

查看此代码并对其进行测试：您可以以更高效，语义和清晰的方式执行相同的操作：

的CSS：

div.imageBox {
  float: left;
  margin-right: 10px;
  }

div.imageBox p {
   text-align: center;
   }

HTML：

<div class="imageBox">
  <a href="#">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /></a>
  <p><a href="#">1</a></p>
</div>

<div class="imageBox">
  <a href="#">
  <img src="image2.gif" width="100" height="100"
  alt="image 1" /></a>
  <p><a href="#">2</a></p>
</div>

<div class="imageBox">
  <a href="#">
  <img src="image3.gif" width="100" height="100"
  alt="image 1" /></a>
  <p><a href="#">3</a></p>
</div>

这就是你所需要的一切！

如果您想保留代码，则没有理由在img标记内使用align对齐。你可以使用span而不是div，但在这种情况下最好继续使用div并给它们一个宽度：

div#Pictures div

    {
       float: left;
       margin-right: 5px;
    }

此代码：

a:links2

毫无意义。 links2是由您创建的类，而不是伪类或伪元素。

Answer 3

我认为display: block;课程中的links2应该正确地将链接放在图片下方。

另外，要使图像水平排列，请在“图片”div中使用<span>而不是<div> s，然后向左浮动。

#Pictures span
{
   float: left;
   margin-right: 5px;
}

使图片在一个层中水平居中

3 个答案: