use*_*938 14 html css html5 alignment css3
我想要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>
Jam*_*mes 16
你的意思是这样的？
<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.
不太确定"中间标题"是什么意思,但是这里有一个解决方案可以让您的图像并排出现,使用优秀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>