将图像与 CSS 对齐答案

【问题标题】：align images with CSS将图像与 CSS 对齐
【发布时间】：2011-09-13 11:49:41
【问题描述】：

您好，我需要将图像与 css 对齐我使用一个名为“boton”的内容，该网站的链接是 www.newprincess.cl 我需要像这样对齐http://imageshack.us/f/69/btnr.jpg/ 怎么能这样？？请帮帮我非常感谢

【问题讨论】：

我尝试在不同的 div 内容中编码分离的图像，但不起作用，

标签： html css image alignment

【解决方案1】：

如下更改你的 CSS

#boton {
    height: 120px;
    width: 157px;
    margin-top: -5px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}

#boton #oneimg {
    top:9px;
    position:absolute;
    text-align:center;
}

#boton #twoimg {
    top:38px;
    position:absolute;  
    text-align:center;
    margin-left: auto;      
    margin-left: 25px;

}

#boton #threeimg {
    top:58px;
    position:absolute;
    text-align:center;
    margin-left: 28px;      
}

并按如下方式更改您的 HTML 代码

<div id="boton">
    <div id="threeimg"><img src="salir.png" border="0"></div>
    <div id="twoimg"><img src="entrar.png" border="0"></div>
    <div id="oneimg"><img src="18.png" border="0"></div>
</div>

【讨论】：

【解决方案2】：

为您的每张图片添加一个id= 属性（我相信您将能够找出我使用的名称）：

#salir {
  position: relative;
  top: -16px;
}

#entrar-link {
  display: block;
}

#entrar {
  position: relative;
  top: -6px;
}

#boton {
  text-align: center;
}

【讨论】：