如何在div中水平垂直居中图片

Question

如何在div中水平垂直居中图片

16

我在页面中有以下标记代码：

<div id="root_img" style="width:100%;height:100%">
    <div id="id_immagine" align="center" style="width: 100%; height: 100%;">
        <a id="a_img_id" href="./css/imgs/mancante.jpg">
            <img id="img_id" src="./css/imgs/mancante.jpg" />
        </a>
    </div>
</div>

它并没有像我期望的那样出现，看起来是这样的:

enter image description here

但是我想要得到这个结果:

enter image description here

如何在水平和垂直方向上居中这张图片？

- CeccoCQ

为什么你使用了4个标签而不是2个？<a style="padding:X"><img /></a> 应该可以工作。 - Vivien

我在 div 的底部看到了一个图像，X 代表什么或者我需要设置一些值吗？ - CeccoCQ

X 对你来说可以是任何好处：“5%”，“10px，0”……此外，您可以使用“background-image”和“background-position”将底部图像放在主 div 上。 - Vivien

可能是重复的问题：如何在 div 中垂直对齐图像。 - Hashem Qolami

7个回答

6

对于垂直对齐，我会使用一些CSS将其从顶部定位在50％处，然后将其向上移动图像高度的一半像素。

水平方向上，我会使用一个margin，就像建议的那样。

因此，如果您的图像大小为100x100px，则最终结果如下。

<img id="my_image" src="example.jpg">

<style>
#my_image{
 position: absolute;
 top: 50%;
 margin: -50px auto 0;
}
</style>

- David Yell

是的，抱歉，我没有看到你的标记。只需将其应用于<a>，因为它包装了你的<img>。 - David Yell

1

Image in a div horizontally and vertically.

<div class="thumbnail">                
    <img src="image_path.jpg" alt="img">
</div>

.thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

- Jignesh Vaghela

0

你需要解决两个方面的问题。第一个方面是水平对齐。这可以通过在围绕图像本身的 div 元素上应用 margin: auto 轻松实现。DIV 需要设置宽度和高度以匹配图像大小（否则将无法正常工作）。为了实现垂直居中对齐，您需要在 HTML 中添加一些 JavaScript。这是因为 HTML 的高度大小在页面启动时未知，可能会在以后更改。最好的解决方案是使用 jQuery 并编写以下脚本： $(window).ready( function() { /* 监听窗口准备就绪事件 - 在页面加载后触发 */ repositionCenteredImage(); });

    $(window).resize(function() { /* listen to page resize event - in case window size changes*/ 
        repositionCenteredImage();
    });

    function repositionCenteredImage() { /* reposition our image to the center of the window*/
        pageHeight = $(window).height(); /*get current page height*/
        /*
        * calculate top and bottom margin based on the page height
         * and image height which is 300px in my case.
         * We use half of it on both sides.
         * Margin for the horizontal alignment is left untouched since it is working out of the box.
        */
        $("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"}); 
    }

显示图像的HTML页面如下：

    <body>
        <div id="pageContainer">
            <div id="image container">
                <img src="brumenlabLogo.png" id="logoImage"/>
            </div>
        </div>
    </body>

附加到元素的CSS如下所示：

#html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
}

#pageContainer { /*css for the whole page*/
    margin: auto auto;   /*center the whole page*/
    width: 300px;
    height: 300px;
}

#logoImage { /*css for the logo image*/
    width: 300px;
    height: 300px;
}

您可以从我们公司主页的以下网址下载整个解决方案：

http://brumenlab.com

- Boro Brumen

0

这个解决方案适用于所有尺寸的图片 在此过程中，图像的比例也得到了保持。

.client_logo{
  height:200px;
  width:200px;
  background:#f4f4f4;
}
.display-table{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.display-cell{
    display: table-cell;
    vertical-align: middle;
}
.logo-img{
    width: auto !important;
    height: auto;
    max-width: 100%;
    max-height: 100%;

}

<div class="client_logo">
    <div class="display-table">
      <div class="display-cell">
         <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
      </div>
    </div>
</div>

你可以根据需求设置 .client_logo 的大小。

- Chintan Mathukiya

-1

尝试像这样做：

<div style="display:table-cell; vertical-align:middle">
 "your content"
</div>

- Key-Six

图片和文本对齐方式不同。 - Murtaza

-1

使用 margin-top 示例 CSS

 #id_immagine{
  margin:0 auto;
   }

- srini

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- talha2k · Accepted Answer

这里有一篇关于如何将图片在div中水平垂直居中的教程。

以下是你要找的内容：

.wraptocenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background-color: #999;
}
.wraptocenter * {
  vertical-align: middle;
}

<div class="wraptocenter">
  <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>