在html中将图像彼此相邻居中答案

【问题标题】：centering images with next to each other in html在html中将图像彼此相邻居中
【发布时间】：2014-09-03 00:31:08
【问题描述】：

我有 3 张图片，我希望所有图片都位于我的水平线之后的页面中心

这里是代码

<div class="footer">
    <hr>
    <p id="socmed">Connect Socially With Us:</p>
    <img id="fb" border="0" src="image/fb.png" alt="Facebook Fan Page" align="center">
    <img id="twitter" border="0" src="image/twitter.png" alt="Facebook Fan Page" align="center">
    <img id="youtube" border="0" src="image/youtube.png" alt="Facebook Fan Page" align="center">
    <hr>
</div>

hr{
    border: 0;
    height: 5px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

我正在尝试使用对齐功能，但它没有任何效果

有没有办法让这 3 张图片居中并彼此相邻？

谢谢

【问题讨论】：

align= 属性已被弃用：w3.org/TR/html401/present/graphics.html#h-15.1.2

标签： html css image alignment center

【解决方案1】：

使用这个

.footer{text-align:center;}

【讨论】：

【解决方案2】：

为您的页脚添加 `text-align:center" CSS 样式。

 .footer{text-align:center;}

【讨论】：

【解决方案3】：

一种方法是将imgs 包装在p 标记中，并将p 标记设置为text-align:center;，如下所示：

<div class="footer">
    <hr>
    <p id="socmed">Connect Socially With Us:</p>
    <p class="center">
    <img id="fb" border="0" src="image/fb.png" alt="Facebook Fan Page">
    <img id="twitter" border="0" src="image/twitter.png" alt="Facebook Fan Page">
    <img id="youtube" border="0" src="image/youtube.png" alt="Facebook Fan Page">
     </p>
    <hr>
</div>


p.center{ text-align:center; }

JS 小提琴：http://jsfiddle.net/9fBtf/2/

【讨论】：