在html中并排对齐图像
[英]align images side by side in html
问题描述
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. 
我想要3个图像并排显示标题，目前我有3张图像从上到下，左边是标题，而不是中心。 How do I make the images appear side by side with caption in the middle? 如何使图像并排显示在中间？ Thanks. 谢谢。
<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>
7 个解决方案
解决方案1
16 2014-07-10 15:11:55
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;
}
解决方案2
6 2014-07-10 15:14:07
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 ，使用优秀的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>
解决方案3
2 2014-07-10 15:20:03
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:left like others suggested) 这将给你一个真正的标题（只需使用Float:left添加第二和第三个imgs Float:left像其他人建议的那样添加）
解决方案4
1 2014-07-10 15:16:45
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>
解决方案5
0 2014-07-10 15:19:04
I suggest to use a container for each img p like this: 我建议使用一个容器，每个img p是这样的：
<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:left to each container. 然后将float:left应用于每个容器。 I add and 5px margin right so there is a space between each image. 我添加和5px margin right所以每个图像之间有一个空格。 Also alway close your elements. 同时关闭你的元素。 Maybe in html img tag is not important to close but in XHTML is. 也许在html img标签关闭并不重要，但在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 从开发角度来看，通常更容易维护
解决方案6
0 2015-11-10 17:11:27
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>
解决方案7
-1 2014-07-10 15:12:04
In your CSS: 在你的CSS中：
.image123{
float:left;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.