CSS - 在 css 中并排居中两个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11819417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - center two images in css side by side
提问by CustomX
I am trying to center two images side by side, but for some reason it always displays the images beneath each other. Does anyone know how I could get them centered and next to each other?
我试图将两个图像并排居中，但由于某种原因，它总是将图像显示在彼此下方。有谁知道我怎样才能让它们居中并彼此相邻？
Thanks!
谢谢！
HTML code
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 code
CSS代码
#fblogo {
display: block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
回答by The Alpha
Try changing
尝试改变
#fblogo {
display: block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
to
到
.fblogo {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
HTML
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.
演示。
回答by Niet the Dark Absol
You can't have two elements with the same ID.
不能有两个具有相同 ID 的元素。
Aside from that, you are defining them as block elemnts, meaning (in layman's terms) that they are being forced to appear on their own line.
除此之外，您将它们定义为块元素，这意味着（用外行的话）它们被迫出现在自己的行上。
Instead, try something like this:
相反，尝试这样的事情：
<div class="link"><a href="..."><img src="..."... /></a></div>
<div class="link"><a href="..."><img src="..."... /></a></div>
CSS:
CSS：
.link {
width: 50%;
float: left;
text-align: center;
}
回答by Julix
Flexbox can do this with just two css rules on a surrounding div.
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>回答by Anay Aggarwal
I understand that this question is old, but there is a good solution for it in HTML5.
You can wrap it all in a <figure></figure>tag. The code would look something like this:
我知道这个问题很老，但在 HTML5 中有一个很好的解决方案。您可以将其全部包装在一个<figure></figure>标签中。代码看起来像这样：
<div id="wrapper">
<figure>
<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>
</figure>
</div>
and the CSS:
和 CSS：
#wrapper{
text-align:center;
}
回答by Max Brewster
I've just done this for a project, and achieved it by using the h6 tag which I wasn't using for anything else:
我刚刚为一个项目完成了这项工作，并通过使用我没有用于其他任何事情的 h6 标签实现了它：
in html code:
在 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>
The space between the image tags puts a vertical gap between the images. The width argument in each img tag is optional, but it neatly sizes the images to fill the width of the page. Notice that each image must be set to take up only 50% of the width. (Or 33% if you're using 3 images.) The width argument must come after the alt and src arguments or it won't work.
图像标签之间的空间在图像之间放置了一个垂直间隙。每个 img 标签中的 width 参数是可选的，但它巧妙地调整图像大小以填充页面的宽度。请注意，每个图像必须设置为仅占宽度的 50%。（如果您使用 3 张图像，则为 33%。）宽度参数必须在 alt 和 src 参数之后，否则将不起作用。
in css code:
在 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;
}
The text items set the look of the caption text, and the text-align property centers both the images and the caption text.
文本项设置标题文本的外观，而 text-align 属性将图像和标题文本居中。
