我有以下代码
<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 个图像水平对齐，文本在它们下方居中。为什么它们默认为垂直，我可以更改此行为吗？
最佳答案
您实际上不需要那么多代码来实现您所追求的目标。例如:
<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>
让元素水平而不是垂直对齐的技巧是“ float ”容器(左或右)。通过设置链接显示: block ；您可以将它们用作容器，而不是将所有内容都包装在额外的
中。我已将宽度设置为 25%(或 24.99% 以避免在某些浏览器中出现舍入错误)，以便它们在页面上均匀分布，但您可能需要不同的对齐方式，这很容易使用边距/填充和/或容器上的不同宽度。另请注意，当您在 body {} 上设置文本颜色时，除了链接之外，您不需要在其他地方再次指定它。 font-family 也是一样，尽管它也被链接继承。祝元素好运!
关于html - 使图片在图层中水平居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/298288/