css 在html中并排对齐图像

91zkwejq 于 2022-12-24 发布在其他

关注(0)|答案(7)|浏览(166)

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

来源：https://stackoverflow.com/questions/24680030/align-images-side-by-side-in-html

7条答案

按热度按时间

x6492ojm1#

尝试this。

- 中央支助组**

.imageContainer {
    float: left;
}

p {
    text-align: center;
}

- 超文本标记语言**

<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）回复(0）举报 2022-12-24

luaexgnf2#

这是我会怎么做，（但是我会使用一个外部样式表为这个项目和所有其他。只是使事情更容易与工作。也这个例子是与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>

赞(0）回复(0）举报 2022-12-24

voj3qocg3#

在CSS中：

.image123{
float:left;
}

赞(0）回复(0）举报 2022-12-24

nszi6y054#

你是说像这样的东西？

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

赞(0）回复(0）举报 2022-12-24

eqzww0vc5#

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

赞(0）回复(0）举报 2022-12-24

uidvcgyl6#

尝试使用此格式

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

赞(0）回复(0）举报 2022-12-24

mkshixfv7#

我建议为每个imgp使用一个容器，如下所示：

<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
这也是一个友好的建议。尽量避免使用内联样式。看看这里：

- 超文本标记语言**

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

- 中央支助事务厅**

div{
    float:left;
    margin-right:5px;
}

div > img{
   height:200px;
    width:200px;
}

p{
    text-align:center;
}

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

为了提高性能，浏览器可以缓存它们
从开发Angular 来看，通常更易于维护

source
fiddle

赞(0）回复(0）举报 2022-12-24

我来回答

css 在html中并排对齐图像

7条答案

相关问题

热门标签

最新问答