Html 使图片在一层中水平居中
我有以下代码Html 使图片在一层中水平居中,html,css,Html,Css,我有以下代码 <html> <head> <title>Test</title> <style type="text/css"> <!-- body,td,th { color: #FFFFFF; } body { background-color: #000000; } #Pictures { position:absolute; width:591px; hei
<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>
试验
我想一个显示：blocklinks2
类中的code>应该将链接正确地放在图像下面
另外，要使图像水平排列，请在“Pictures”div中使用
s而不是
s，然后将它们向左浮动
#Pictures span
{
float: left;
margin-right: 5px;
}
实际上，您不需要那么多代码来实现您的目标。例如：
<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>
身体{
背景色：#000；
颜色：#FFF；
}
a{
字体系列：“百老汇”，百老汇，monospace；
字体大小：14px；
颜色：#FFF；
}
#图像a{
宽度：24.99%；
显示：块；
浮动：左；
文本对齐：居中；
}
让项目水平对齐而不是垂直对齐的技巧是“浮动”容器（左或右）。通过设置要显示的链接：block；你可以用它们作为容器，而不是用额外的s包装所有东西。我已经将宽度设置为25%（或24.99%，以避免在某些浏览器中出现舍入错误），这样它们就可以均匀地分布在整个页面上，但您可能需要使用边距/填充和/或容器上的不同宽度来轻松地进行不同的对齐。还要注意的是，当您在主体{}上设置文本颜色时，除了为链接之外，不需要在其他地方再次指定它。字体系列也是如此，尽管链接也继承了这一点。祝项目顺利 查看并测试此代码：您可以以更高效、语义更清晰的方式执行相同的操作：
Css:
Html:
此代码：
a:links2
毫无意义。links2是由您创建的类，不是伪类或伪元素。它确实会将文本放在图像的中心位置，但不会阻止图像垂直堆叠。抱歉！相应地编辑了我的回复。它似乎有效！我已经将所有DIV替换为：我已经在答案中添加了您需要的CSS:）这项工作，但在我看来并不是获得您所需内容的最佳方式。标记太多，如果需要为span指定float:left属性，则没有理由使用span而不是div。
<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>
div#Pictures div
{
float: left;
margin-right: 5px;
}
a:links2