html - 水平および垂直方向に div の画像を中央に配置する方法

Question

ページに次のマークアップ コードがあります。

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

そして、期待どおりに表示されません。次のようになります。

しかし、私はこの結果を得たかった:

この画像を水平方向と垂直方向の中央に配置するにはどうすればよいですか?

Answer 1

これは、画像を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>

Answer 2

垂直方向の配置については、CSS を含めて上 50% から配置し、画像のピクセル数の半分の高さまで移動します。

水平、提案されているようにマージンを使用します。

したがって、画像が 100x100px の場合は、最終的には 100x100px になります。

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

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

Answer 3

このソリューションは、すべてのサイズの画像に対応しています 。これにより、画像の比率も維持されます。

.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

あなたの条件に従って

Answer 4

次のようなことを試してください：

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

Answer 5

マージントップの使用

例のCSS

 #id_immagine{
  margin:0 auto;
   }