图像垂直居中对齐答案

【问题标题】：Vertical Align Middle for Image图像垂直居中对齐
【发布时间】：2012-10-09 21:21:11
【问题描述】：

希望你能在这里帮助我，我是编码新手，真的很难得到，我确信这是一个非常简单的指令，已执行。

我想将我的 gif 图像对齐在页面的中间位置，但我似乎无法做到正确；我也不想使用 CSS，作为一个新手，我发现它不会直接停留在更改屏幕尺寸的中心，但我确信有办法解决这个问题。

CSS代码如下；

  a:link {text-decoration: none;}
  a:visited {text-decoration: none;}
  a:active {text-decoration: none;}
  a:hover {text-decoration: underline; color: red;}

HTML：

<p style="position: absolute; center: 0; width: 100%; vertical-align: middle">
 <img alt="logo" src="logov3.gif" title="logo">
</p>
<p style="position: absolute; bottom: 0; left: 0; width: 100%; text-align: center">
  <a href="mailto:info@valuableconsultants.com">
    <font color="#000000" face="Book Antiqua" size="2">info@valuableconsulatants.com</font>
  </a>
</p>

【问题讨论】：

在 jsfiddle 中发布您的 html 和 css 代码.. 您的代码看起来不完整
为什么写，不想用css，到处都用？

标签： html alignment vertical-alignment

【解决方案1】：

如果图片位置是绝对的，可以通过set来居中：

图像的固定宽度和高度
图像左侧和顶部 50%
最后设置图像顶部和左侧边距：分别为 -(height/2) 和 -(width/2)

样本

HTML：

<body>
<img id="image" src="" alt="">
</body>

CSS：

#image {
 position:absolute;
 width:200px;
 height:300px;
 left:50%;
 top:50%;
 margin-left:-100px;
 margin-top:-150px;
}

【讨论】：

【解决方案2】：

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

【讨论】：

嗨菲尔，感谢您的回复，恐怕没有奏效，它需要在页面中间的死点。任何想法；

【解决方案3】：

第一：

<p style="position: absolute; center: 0; width: 100%; vertical-align: middle">
 <img alt="logo" src="logov3.gif" title="logo">
</p>

center 不是 CSS 属性。

因为你使用的是position: absolute;，所以不会居中

解决方案：

添加宽度，图像的宽度，并添加边距以使其居中：

<p style="width: widthOffImageInPixel;margin-top: 0;margin-right: auto;margin-bottom: 0; margin-left: auto;>
  <img alt="logo" src="logov3.gif" title="logo">
</p>

【讨论】：