1

ここで私を助けてくれることを願っています.私はコーディングが初めてで、実行するのに本当に苦労しています.

gif 画像をページの中央中央に配置したいのですが、うまくいきません。また、初心者なので、画面サイズの変更時にCSSが直接中央に留まらないことがわかったので、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>
4

3 に答える 3

2

http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizo​​ntally-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

最初：

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

画像の位置が絶対的な場合は、次のように設定して中央に配置できます。

  1. 画像の固定幅と高さ
  2. 画像の左と上 50%
  3. 最後に画像の上と左の余白を設定します: それぞれ -(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;
}
于 2012-10-19T09:59:08.667 に答える