1

Hoping you can help me here, I'm new to coding and really struggling to get, what I'm sure is a very simple instruction, executed.

I want to align my gif image in the center middle of the page, I just can't seem to get it right; also I don't want to use CSS, as being a novice I found it wouldn't stay directly in the center on changing screen sizes, but I'm sure there is a way around that.

The CSS code is as follows; 

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

3 回答 3

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;
}
于 2012-10-19T09:52:10.447 回答
1

first:

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

center is not a CSS property.

Because you are using position: absolute;, it will not be centered

solution:

Add a width, the width of your image, and add margin to center it:

<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>
于 2012-10-19T09:43:58.953 回答
0

If image position is absolute, you can centered by set:

  1. fixed width and height for image
  2. image left and top 50%
  3. and finally image top and left margins set: -(height/2) and -(width/2) respectively

Sample

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;
}
于 2012-10-19T09:59:08.667 回答