在html中并排对齐图像答案

【问题标题】：align images side by side in html在html中并排对齐图像
【发布时间】：2014-09-01 00:49:21
【问题描述】：

我想要 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>

【问题讨论】：

CSS - center two images in css side by side 的可能重复项
Display two images side by side on an HTML Page的可能重复

标签： html css alignment

【解决方案1】：

你的意思是这样的？

<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。

【讨论】：

谢谢，你怎么在css页面里不提class，css页面里的div怎么知道你指的是image class="image123"。你也知道如何将文字放在图像的中心吗？
如果您打算使用 float 来执行此操作，您也应该清除它，为自己节省更多的痛苦。我个人认为 display:block 是解决这个问题的更好方法。应谨慎使用浮点数，如果有替代方案，则根本不用。
我没有使用 image123 或 middle-img 类。我应该把它们拿出来的。我不确定图像中心的文字是什么意思，您的意思是它位于图像的顶部吗？ @Liam 感谢您的提示，我从来不知道浮动物品不会增加他们父母的身高，这解释了为什么我不时看到它！与给父级自动溢出相比，清除有什么优势？添加一个额外的 div 似乎很乱？
Overflow:auto 是一种清除浮动的方法。 There are a couple.
我上面的评论也应该是display:inline-block...?!

【解决方案2】：

不太清楚您所说的“中间的标题”是什么意思，但这里有一个解决方案可以让您的图像并排显示，使用出色的 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>

【讨论】：

是的，我会推荐这个而不是花车。
你好，不知道图片下的文字字体可以改吗？我必须使用 CSS。
@user3809938 ：嗨，也许你应该看看 CSS 基础知识，你不觉得吗？更具体地说是font-family。猜猜那不会有伤害。

【解决方案3】：

尝试使用这种格式

<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 添加第二个和第三个图像）

【讨论】：

请记住这是very badly supported in IE browsers

【解决方案4】：

我建议为每个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 应用于每个容器。我添加和5pxmargin right，所以每个图像之间都有一个空格。也总是关闭你的元素。也许在 html 中 img 标签不重要，但在 XHTML 中是。

fiddle

也是一个友好的建议。尽量避免使用内联样式。看这里：

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;
}

通常建议您使用链接样式表，因为：

它们可以被浏览器缓存以提高性能
从开发角度来看，通常更容易维护

source

fiddle

【讨论】：

【解决方案5】：

试试this。

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>

【讨论】：

【解决方案6】：

这是我的做法，（但是我会为这个项目和所有其他项目使用外部样式表。只是让事情更容易使用。这个例子也是 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】：

在您的 CSS 中：

.image123{
float:left;
}

【讨论】：