1 
body{
    width:auto;
    color:white;
    font-size:15px;
    width:100%;
    max-width:1980px;
    min-width:334px;    
    margin:0px auto;
}

これは私のコードです。すべての画面解像度でサムネイルを中央に配置する必要があります。しかし、私にはできません。タグも試してみました。それもうまくいきませんでした。私は何をすべきか？

4

3 に答える 3

1

次のコンポーネントを使用します。

  • height：htmlタグ、bodyタグ、コンテナ、および空のプレースホルダー要素の場合は100％

  • display：inline-block; およびvertical-align：コンテンツの中央とプレースホルダーは、ブラウザー間で高さが定義されていないコンテンツを垂直方向に中央揃えにします。

  • プレースホルダー要素には、ラインボックスを支えるために100％の高さが与えられているため、vertical-align：middleが目的の効果を発揮します。

  • 画像をラップするための固定幅のコンテナ。

  • display：inline for thecontentdivおよびtext-aligncenterto the container divは、ブラウザー間で幅が定義されていないコンテンツの水平方向の中央揃えを実行します。

垂直方向の配置とテキストの配置の両方の手法を組み合わせて、中央に配置された画像ギャラリーを作成します。

    <!doctype html>
    <html>
    <head>
    <title>Centered Image Gallery</title>
    <style type="text/css">
    html, body, .container, .placeholder { height: 100%;}
    
    img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }
    
    .container { text-align:center; }
    
    /* Use width of less than 100% for Firefox and Webkit */
    .wrapper { width: 50%; }
    
    .placeholder, .wrapper, .content { vertical-align: middle; }
    
    /* Use inline-block for wrapper and placeholder */
    .placeholder, .wrapper { display: inline-block; }
    
    .fixed { min-width: 1px; }
    
    .content { display:inline; }
    
    @media,
     {
     .wrapper { display:inline; }
     }
     </style>
    
    </head>
      <body>
      <div class="container">
        <div class="content">
            <div class="wrapper">
              <div class="fixed">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozdev.org/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="https://vivaldi.com/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
            </div>
          </div>
       </div>
       <span class="placeholder"></span>
    </div>
    
    </body>
    </html>

于 2012-06-21T20:27:48.390 に答える
1

このURLを参照してください：http：//jsfiddle.net/DyRS4/2/

html：

<div id="my-div">my div</div>

css：

div#my-div{
    margin:0px auto;
    background: red;
    width: 100px;
    height: 100px;
}
于 2012-06-16T19:01:25.303 に答える
1

CSS 

.picture_area { width:/*width of picture area you want in pixels*/;
                height: auto; 
                min-width:/*smallest size of window in pixels that does not push pics left*/;}
                margin-left: auto; margin-right: auto; }
.navigation_area { margin-bottom: 5%; }

HTML

 <div class="navigation_area">
        <!--Nav code here-->
    </div>


    <div class="picture_area">
          <!--All your image code here-->
    </div>

サムネイルを配置する領域に特別なdivを作成することをお勧めします。最初
に、ナビゲーションパネルの下余白を、写真と重ならないように設定する必要があります。次に、サムネイル領域の幅をピクセルで定義します。たとえば、 `width：500px; 次に、min-width属性を、画像を左に押し出さない最小サイズに設定します。たとえば、min-width：500px;。次に、それをページの中央に配置して、画像領域のマージン左とマージン右を自動に設定します。

于 2012-06-16T20:17:00.620 に答える