0

div id 内の画像である要素があります。このページを工事中のページにします。"margin: auto" css コマンドで div を作成しました。サイトがアクセスするブラウザーに div オートセンターを配置できる垂直方向の距離は何ですか?

これが初めてで、JSFiddle全体のやり方がわからない笑

こちらも URL です: http://nerissagrigsby.com/?page_id=5

私のCSS：

#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}

私のHTML：

<body>
<div id="openpagesig">
    <img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
    />
</div>
<!-- Open Page Signature -->
</body>
4

4 に答える 4

3

次の CSS を試しましたか。

.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
    position: absolute; /* or "fixed" */

    /* The element you want to place in the middle of the page
       center should have explicitly defined dimensions: */
    width: 100px;
    height: 100px;

    top: 50%;
    margin-top: -50px; /* offset back at exactly half height of the element */
    left: 50%;
    margin-left: -50px; /* offset back at exactly half width of the element */
}

これが実際の例です。

これは Internet Explorer 5.5 でも動作することを言及する必要がありますか? ...しかし、このブラウザがまだ誰にも関係があるとは思えません。

下の画像を参照して、負のマージンがどのように役立つかを確認してください。

要素をオフセットするために負のマージンがどのように機能するか

于 2013-01-31T15:28:11.873 に答える
0

あなたが抱えている問題はdiv、ページ上の要素を垂直方向に整列させることに関連しています。これは、HTMLおよびCSSコーディングでよくある問題です。

1つの解決策は、外部divタグ内にコンテナ要素を含めることです。アウターは100％にdiv設定する必要がありdisplay: table;ます。プロパティで内部をに設定します。position: fixed;widthheightdivdisplay: table-cell;vertical-align: middle;

さらに、アウターはその子要素を中央に配置するためにdiv持っている必要があります。text-align: center;

必要なコードは次のとおりです。

.outer { 
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
  position: fixed;
}
.container {
  display: table-cell;
  vertical-align: middle;
}

jsbinの例：http： //jsbin.com/otolot/1/

ウィンドウのサイズを変更して、これが機能することを確認してください。

于 2013-01-31T16:13:35.717 に答える
0

個人的には、次のようなものを使用します。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body>

    <div class="container">
        <div class="container-content">
            <div class="content">
              <img src="//placehold.it/803x283" />
            </div>
        </div>
    </div>
  </body>
</html>


<style>

  html, body {
    height: 100%;
  }

  .container {
    display: table;
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .container-content {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
  }

  .container-content > .content {
    max-width: 803px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

</style>

このソリューションは、コンテンツを垂直方向に中央揃えにするだけでなく、ブラウザー ウィンドウの高さが小さすぎてすべてを表示できない場合でも、スクロールしてすべてのコンテンツを表示できるため、非常にうまく機能します。メソッド。

例：

http://jsbin.com/owayec/2/

于 2013-01-31T16:00:30.293 に答える
0

次のようなものを試してください：

.centeredDiv {
    width:17em;
    height:9em;
    position:absolute;
    left:50%;
    top:50%;
    margin:-135px 0 0 -155px;
    padding:1em;
    background-color:#fffff7;
    opacity:0.67;
    filter:alpha(opacity=67); /* for IE8 and earlier */
    border:2px solid #191919;
}

当然のことながら、測定値と色を適切に編集します。

于 2013-01-31T15:27:56.027 に答える