在html中並排對齊圖像
[英]align images side by side in html
問題描述
我想要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>
7 個解決方案
解決方案1
16 2014-07-10 15:11:55
你的意思是這樣的？
<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>
與imgContainer風格一樣
.imgContainer{
float:left;
}
另見這個jsfiddle 。
解決方案2
6 2014-07-10 15:14:07
不太確定“中間標題”是什么意思，但是這里有一個解決方案可以讓你的圖像並排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
嘗試使用此格式
<figure>
<img src="img" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
這將給你一個真正的標題（只需使用Float:left添加第二和第三個imgs Float:left像其他人建議的那樣添加）
解決方案4
1 2014-07-10 15:16:45
試試這個 。
CSS
.imageContainer {
float: left;
}
p {
text-align: center;
}
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
我建議使用一個容器，每個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>
然后將float:left應用於每個容器。 我添加和5px margin right所以每個圖像之間有一個空格。 同時關閉你的元素。 也許在html img標簽關閉並不重要，但在XHTML中。
也是一個友好的建議。 盡量避免使用內聯樣式。 看看這里：
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
div{
float:left;
margin-right:5px;
}
div > img{
height:200px;
width:200px;
}
p{
text-align:center;
}
通常建議您使用鏈接樣式表，因為：
- 它們可以由瀏覽器緩存以提高性能
- 從開發角度來看，通常更容易維護
解決方案6
0 2015-11-10 17:11:27
這是我將如何做到的，（但是我會為這個項目使用外部樣式表以及所有其他的。只是讓事情更容易使用。這個例子也是用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
在你的CSS中：
.image123{
float:left;
}
如何在html中並排對齊圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.