在 html 中并排对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24680030/
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
align images side by side in html
提问by user3809938
I want 3 images side by side with caption, at the moment I have 3 images going from top to bottom, with the caption on the left, not on the centre. How do I make the images appear side by side with caption in the middle? Thanks.
我想要 3 张带有标题的图像，目前我有 3 张图像从上到下，标题在左侧，而不是在中心。如何使图像并排显示，中间有标题？谢谢。
<div class="image123">
<img src="/images/tv.gif" height="200" width="200" style="float:left">
<p>This is image 1</p>
<img class="middle-img" src="/images/tv.gif"/ height="200" width="200">
<p>This is image 2</p>
<img src="/images/tv.gif"/ height="200" width="200">
<p>This is image 3</p>
</div>
回答by James
You mean something like this?
你的意思是这样的？
<div class="image123">
<div class="imgContainer">
<img src="/images/tv.gif" height="200" width="200"/>
<p>This is image 1</p>
</div>
<div class="imgContainer">
<img class="middle-img" src="/images/tv.gif"/ height="200" width="200"/>
<p>This is image 2</p>
</div>
<div class="imgContainer">
<img src="/images/tv.gif"/ height="200" width="200"/>
<p>This is image 3</p>
</div>
</div>
with the imgContainer style as
使用 imgContainer 样式作为
.imgContainer{
float:left;
}
Also see this jsfiddle.
另请参阅此jsfiddle。
回答by Pierre-Adrien Buisson
Not really sure what you meant by "the caption in the middle", but here's one solution to get your images appear side by side, using the excellent display:inline-block:
不太确定你所说的“中间的标题”是什么意思，但这里有一个解决方案，可以让你的图像并排显示，使用优秀的display:inline-block：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/350x150" height="200" width="200" />
<p>This is image 1</p>
</div>
<div class="container">
<img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200" />
<p>This is image 2</p>
</div>
<div class="container">
<img src="http://placehold.it/350x150" height="200" width="200" />
<p>This is image 3</p>
</div>
</div>
</body>
</html>
回答by DarkNinja955
Try using this format
尝试使用这种格式
<figure>
<img src="img" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
This will give you a real caption (just add the 2nd and 3rd imgs using Float:leftlike others suggested)
这会给你一个真正的标题（只需Float:left像其他人建议的那样添加第二个和第三个 imgs ）
回答by Alex Char
I suggest to use a container for each imgplike this:
我建议imgp像这样为每个使用一个容器：
<div class="image123">
<div style="float:left;margin-right:5px;">
<img src="/images/tv.gif" height="200" width="200" />
<p style="text-align:center;">This is image 1</p>
</div>
<div style="float:left;margin-right:5px;">
<img class="middle-img" src="/images/tv.gif/" height="200" width="200" />
<p style="text-align:center;">This is image 2</p>
</div>
<div style="float:left;margin-right:5px;">
<img src="/images/tv.gif/" height="200" width="200" />
<p style="text-align:center;">This is image 3</p>
</div>
</div>
Then apply float:leftto each container. I add and 5pxmargin rightso there is a space between each image. Also alway close your elements. Maybe in html imgtag is not important to close but in XHTML is.
然后适用float:left于每个容器。我添加，5pxmargin right所以每个图像之间有一个空格。也总是关闭你的元素。也许在 htmlimg标签中关闭并不重要，但在 XHTML 中很重要。
Also a friendly advice. Try to avoid inline styles as much as possible. Take a look here:
也是一个友好的建议。尽量避免使用内联样式。看看这里：
html
html
<div class="image123">
<div>
<img src="/images/tv.gif" />
<p>This is image 1</p>
</div>
<div>
<img class="middle-img" src="/images/tv.gif/" />
<p>This is image 2</p>
</div>
<div>
<img src="/images/tv.gif/" />
<p>This is image 3</p>
</div>
</div>
css
css
div{
float:left;
margin-right:5px;
}
div > img{
height:200px;
width:200px;
}
p{
text-align:center;
}
It's generally recommended that you use linked style sheets because:
通常建议您使用链接样式表，因为：
- They can be cached by browsers for performance
- Generally a lot easier to maintain for a development perspective
- 它们可以被浏览器缓存以提高性能
- 从开发角度来看，通常更容易维护
回答by Michael Bellamy
Try this.
试试这个。
CSS
CSS
.imageContainer {
float: left;
}
p {
text-align: center;
}
HTML
HTML
<div class="image123">
<div class="imageContainer">
<img src="/images/tv.gif" height="200" width="200" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="/images/tv.gif"/ height="200" width="200" />
<p>This is image 2</p>
</div>
<div class="imageContainer">
<img src="/images/tv.gif"/ height="200" width="200"/>
<p>This is image 3</p>
</div>
</div>
回答by Paydros
Here is how I would do it, (however I would use an external style sheet for this project and all others. just makes things easier to work with. Also this example is with html5.
这是我将如何做到的，（但是我会为此项目和所有其他项目使用外部样式表。只是让事情更容易使用。这个例子也是 html5。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<figure>
<img src="http://placehold.it/350x150" height="200" width="200">
<figcaption>This is image 1</figcaption>
</figure>
<figure>
<img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200">
<figcaption>This is image 2</figcaption>
</figure>
<figure>
<img src="http://placehold.it/350x150" height="200" width="200">
<figcaption>This is image 3</figcaption>
</figure>
</div>
</body>
</html>
回答by Logern
In your CSS:
在你的 CSS 中：
.image123{
float:left;
}
