如何在div水平和垂直中心图像 [英] How to center image in a div horizontally and vertically

问题描述

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

 < div id =root_imgstyle = 100％; height：100％> 
< div id =id_immaginealign =centerstyle =width：100％; height：100％;> 
< a id =a_img_idhref =./ css / imgs / mancante.jpg> 
< img id =img_idsrc =./ css / imgs / mancante.jpg/> 
< / a> 
< / div> 
< / div> 
  

它不像我预期的，它看起来像：

>

但我想得到这个结果：

解决方案

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

I have the following markup code in my page:

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

And it does not appear as I expected, it looks like that:

But I wanted to get this result:

How can I center this image horizontally and vertically?

解决方案

Here is a tutorial for how to center the images vertically and horizontally in a div.

Here is what you are looking for:

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

这篇关于如何在div水平和垂直中心图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！