使图像在html中对齐屏幕的中心 [英] Making image align center of screen in html

问题描述

我正在iOS设备上加载图片。我希望我的图像能够以水平方向为中心，并垂直居中显示所有屏幕和方向。我已经尝试过使用table和td，它是水平居中对齐，但不是垂直居中对齐。这就是我试过的
html：

 < table width = 100％height = 100％> 
< tr> 
< td style =text-align：center; vertical-align：middle;> 
< img src =/> 
< / td> 
< / tr> 
< / table> 
  

css：

  html，body 
 {
 height：100％; 
 
  

解决方案

用 div 和 img

工作演示

HTML

 < div>< img src =http://placehold.it/350x150>< / div> 
  

CSS

  html，body 
 {
 height：100％; 
保证金：0; 
 padding：0; 
} 
 
 div {
 position：relative; 
身高：100％; 
宽度：100％; 
} 
 
 div img {
 position：absolute; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
 margin：auto; 
} 
  

I am loading image on iOS device. I want my image to be centered horizontally as well vertically center with all screens and orientation . I have tried it using table and td , It is aligning horizontally center but not aligning vertically middle . This is what I have tried html:

<table width=100% height=100%> 
    <tr>
        <td style="text-align: center; vertical-align: middle;">
            <img src="" />
        </td>
    </tr>
</table>

css:

html, body
{
    height: 100%;
}

解决方案

Instead of Table, You can achieve the same with div and img

Working Demo

HTML

<div><img src="http://placehold.it/350x150"></div>

CSS

html, body
{
    height: 100%;
    margin:0;
    padding:0;
}

div {
    position:relative;
    height: 100%;
    width:100%;
}

div img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

这篇关于使图像在html中对齐屏幕的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！