2

私は、モバイル画面の解像度に対応するWebページを作成する練習をしています。幅で成功しました。これを高さで管理するにはどうすればよいですか？私のラッパーは、垂直方向に整列するのではなく、引き続き上に留まります。

私はこの問題について多くの質問を見てきましたが、私のcssで指定された解決策をまだ見つけることができませんでした。誰かが私を助けてくれることを願っています。

HTML

<body>
  <div class="wrapper">
    <div class="header">
    </div>
    <div class="content">
      <a href="http://test"><div id="topleftbox"></div></a>
      <a href="http://test"><div id="toprightbox"></div></a>
      <a href="http://test"><div id="bottomleftbox"></div></a>
      <a href="http://test"><div id="bottomrightbox"></div></a>
    </div>
  </div>

CSS

    body {

    }

    .wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    }

    .header {
    min-width: 50%;
    height: 20px;
    }

    .content {
    min-width: 500px;
    width: 40%;
    height: auto;
    margin: 0 auto;
    }

    #topleftbox {
    background: url(..);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: left;
    }

    #toprightbox {
    background: url(...);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: right;
    }

etc.
4

4 に答える 4

3

使用display:table-cell;するには、完全なテーブル構造をシミュレートする必要があります。html幸いなことに、タグとbodyタグに対してスタイルを設定できるため、マークアップを追加する必要はありません。

html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

注：これは、div自体ではなく、.wrapperのコンテンツを垂直方向に中央揃えにします。

于 2013-02-26T22:49:02.337 に答える
0

水平方向に中央揃えする場合とは異なり、垂直方向に中央揃えするCSSの方法はありませんでした。唯一の方法は、javascriptを使用して「window.innerHeight」を取得し、それにHTML要素（ラッパー）の高さを追加して、合計を半分に分割することです。そして、それを新しいトップポジションとして設定します。

また、「ラッパー」の高さは100％です。これは、画面の高さ全体を占めることを意味します。画面と同じ高さの場合は中央に配置されません。また、幅は100％ですが、「margin：0auto」が何かをしているのではないかと思います。

于 2013-02-26T22:46:26.537 に答える
0

display:tableテーブルやテーブルセルなどのDIVをレンダリングするために使用できます。

詳細はこちら：http ：//www.jakpsatweb.cz/css/css-vertical-center-solution.html

于 2013-02-26T22:40:20.133 に答える
0

CSS内の垂直方向の配置には、いくつかのオプションがあります。

1.テーブルセル経由。（これはIE8 +で機能します）

{
    display:table-cell;
    vertical-align:middle;
}

2. line-height =要素の高さ（複数行のテキストがある場合、これは私が想像するファンキーに見えます）

{
    height:10em; 
    line-height:10em;
}

あなたが見つけることができるより多くのオプションがあります、しかし私はdisplay: table今日あなたの最善の策であると信じています。

http://www.zann-marketing.com/.../vertically-centering-text-using-css.html https://stackoverflow.com/questions/2939914/

于 2013-02-26T22:47:12.823 に答える