CSS - 在css中并排放置两个图像

我想将两个图像并排居中，但由于某种原因，它总是在相互之间显示图像。有谁知道我怎么能让他们居中并且彼此相邻？CSS - 在css中并排放置两个图像

谢谢！

HTML代码

<a href="mailto:[email protected]"> 
<img id="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a> 
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank"> 
<img id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>`

CSS代码

#fblogo { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
}

来源

2012-08-05 CustomX

ID必须是唯一的。 – j08691 2012-08-05 19:31:29

尝试改变

#fblogo { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
}

到

.fblogo { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
} 

#images{ 
    text-align:center; 
}

HTML

<div id="images"> 
    <a href="mailto:[email protected]"> 
    <img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a> 
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank"> 
    <img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a> 
</div>

DEMO。

来源

2012-08-05 19:33:32

这使它们彼此相邻，但不居中。 – CustomX 2012-08-05 19:37:25

也检查更新的演示。 – 2012-08-05 19:38:52

看来附加到电子邮件地址的图像不再有效。在这里你会找到这个答案的小提琴的固定版本（以及一些改进以提高代码的可读性）：http://jsfiddle.net/hBCzA/1/（我刚刚在img http：/ /a.fsdn.com/sd/topics/programming_64.png） – pablofiumara 2013-09-16 23:22:23

你不能有相同的ID两个元素。除此之外，你将它们定义为块元素，意味着（以外行的话来说）它们被迫出现在他们自己的路线上。

相反，尝试这样的事：

<div class="link"><a href="..."><img src="..."... /></a></div> 
<div class="link"><a href="..."><img src="..."... /></a></div>

CSS：

.link { 
    width: 50%; 
    float: left; 
    text-align: center; 
}

来源

2012-08-05 19:33:06

这不起作用，它出于某种原因搞砸了：s – CustomX 2012-08-05 19:47:01

我刚刚做了这一个项目，并通过使用我没有使用其他的事了H6标签来实现它：

在HTML代码

：

<h6><img alt="small drawing" src="../Images/image1.jpg" width="50%"/> <img alt="small drawing" src="../Images/image2.jpg" width="50%"/><br/>Optional caption text</h6>

之间的空间图像标签在图像之间放置垂直间隙。每个img标签中的width参数都是可选的，但它会整齐排列图像的大小以填充页面的宽度。请注意，每张图片必须设置为只占50％的宽度。（如果使用3张图像，则为33％）。width参数必须位于alt和src参数之后，否则将不起作用。

在CSS代码：

/* h6: set presentation of images */ 
h6 
    { 
    font-family: "Franklin Gothic Demi", serif; 
    font-size: 1.0em; 
    font-weight: normal; 
    line-height: 1.25em; 
    text-align: center; 
    }

的文本项设置标题文本的外观，和text-align属性中心两个图像和字幕文本。

来源

2014-09-05 08:42:39

不要仅仅因为您没有在任何地方使用标签而使用标签 - 这是类的用途（使用div或跨度）。标签意味着语义，大多数浏览器都有需要重置的默认样式。 – Marshall 2015-06-26 15:58:08

Flexbox可以在周围的div上只用两个css规则来做到这一点。

.social-media{ 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="social-media"> 
 
<a href="mailto:[email protected]"> 
 
<img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a> 
 
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank"> 
 
<img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a> 
 
</div>

来源

2017-03-30 20:06:49 Julix

CSS - 在css中并排放置两个图像

回答

相关问题