Question

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

我想将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>

Answer 1

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

Answer 2

第一

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

Answer 3

如果图像位置是绝对的，则可以通过设置居中：

图片的固定宽度和高度
图片左侧和顶部50％
最后将图像的左上边距设置为： - （高度/ 2）和 - （宽度/ 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;
}

垂直对齐图像中间

3 个答案: