logo标签列表

在HTML中将图像并排对齐

htmlcssalignment
20

我希望在同一行上有三张带标题的图片，但目前这三张图片是从上到下排列的，标题在左侧而不是中央。请问如何使这三张图片并排显示，并让标题居中呢？谢谢。

<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>
1
可能是CSS-如何在CSS中使两个图像并排居中的重复问题。 - Liam
1
可能是在HTML页面上并排显示两张图片的重复问题。 - Box Box Box Box
7个回答
23

你是指类似这样的吗？

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

1
如果你要使用浮点数来做这件事，你也应该清除它，这样可以避免在后面出现很多问题。个人认为display:block是解决这个问题的更好方法。浮点数应该被谨慎使用，并且只有在没有其他替代方案时才使用。 - Liam
1
我没有使用image123或middle-img类。我应该把它们拿出来。我不确定你所说的图像中心的文本是什么意思，你是指让它在图像上方吗？@Liam感谢您的建议，我从未知道浮动项目不会增加其父元素的高度，这就解释了为什么我有时会看到这种情况！相对于给父元素自动溢出，清除的优点是什么？添加额外的div似乎很混乱？ - James
1
Overflow:auto是一种清除浮动的方法。有几种方法。 - Liam
8年过去了，有人点赞了这篇文章，让我回到了这里。我肯定会推荐使用inline-block，就像@Liam建议的那样，而不是在这里到处使用float:left（太可怕了）。 - James
1
使用flexbox来进行布局吧！在2022年，这是更好的选择。@James - Liam
显示剩余4条评论
8

我不太确定你所说的“中间字幕”是什么意思，但是这里有一个解决方案，可以使用优秀的 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>

是的，我会推荐使用这个而不是浮点数。 - Michael
你好，你知道是否可以更改图像下方文本的字体吗？我需要使用CSS吗？ - user3809938
@user3809938：嗨，也许你应该看一下CSS基础知识，不是吗？特别是font-family。我想那不会有坏处的。 - Pierre-Adrien
4
尝试使用这种格式。
<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添加第二个和第三个图像)

请记住，在IE浏览器中，此功能支持得非常不好。 - Liam
3
我建议每个和

使用一个容器，像这样：

<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 中是重要的。

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

一般建议使用链接样式表，因为：
  • 它们可以被浏览器缓存以提高性能
  • 从开发角度来看，通常更容易维护

来源

演示

1
尝试 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>
0

这是我会做的方式，（不过对于这个项目和其他所有项目，我会使用外部样式表。这样可以更方便地处理事情。此外，这个示例是使用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>
-1

在你的CSS中：

.image123{
float:left;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接