-1

はい。これは何十億回も尋ねられてきました。しかし、誰も私に合った答えを出していません。

それはとても愚かです。私は SPLASH PAGE を持っています..ほとんどコードがありません。含まれているのは、いくつかの js と、1 つずつフェードインする一連の写真だけです。

私が何をしても、画面の左上に配置されます。これがコードです。

<div style="height:100%; width=100%; margin: 0px auto;" id="these">
    <img src="photos/splash/Y.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/I.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/K.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/M.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/U.png" height="250px" style="padding: 20px;">
    <img src="photos/splash/N.png" height="250px" style="padding: 20px;">
</div>

解像度に関係なく、画面の真ん中に配置したい。ID="these" は、CSS レベルのスタイルや配置ではなく、それらを表示する JavaScript に関連しています。

ばかばかしいほど単純ですよね?? うん。常に左上に表示されます。

jsを投稿する必要はないと思います（また、投稿が壊れています）が、必要な場合はお問い合わせください。それは正常に動作します。私はバックエンド コーダーであり、HTML/CSS を (嫌いなように) 嫌いです。ですから、あいまいな提案をするだけでなく、実際にそれについて説明する必要があります.

テーブルも作ってみました！バラインセンター付き。それはそれを中央に配置しましたが、各画像が中央に表示され、次の画像がフェードインすると左に押し出されました。明らかに、私が望むものではありません.

私が望むのは、各画像が次々と独自の位置に表示されることです。ただし、どの画面解像度でも機能します。

気がおかしくなりそうだ。

ありがとう。

4

5 に答える 5

0

最も簡単な解決策 (フィドル):

html, body {
    height: 100%; /* necessary to make the window height be 100% */
    margin: 0;
}

body {
    display: table;
    width: 100%;
}

#these {
    display: table-cell;
    vertical-align: middle; /* for table cells, it aligns their content */
    text-align: center;
}

別のオプション ( fiddle ):

html, body {
    height: 100%; /* necessary to make the window height be 100% */
    margin: 0;
}

#these {
    text-align: center; /* images are text content */
    white-space: nowrap;
}

#these:after {
    content: '';
    display: inline-block; /* adding invisible inline placeholder after images */
    height: 100%; /* make it 100% tall */
    vertical-align: middle; /* and align the whole line to its vertical center */
}

img {
    vertical-align: middle; /* align vertical centers of images to the middle of the line  */
}
于 2013-07-26T23:33:03.207 に答える
0

これを台無しにする他のCSSがない限り、追加するだけです

#these {
    text-align: center;
}

divラッパーに追加し、可視性のオン/オフを切り替えて、それらを所定の位置に保ちます: http://jsfiddle.net/63cHS/

于 2013-07-26T22:17:47.440 に答える
0

div の 100% の高さは機能しません。これは、CSS の欠点の 1 つです (私の意見では)。

結局のところ、身長を知っている場合にのみ実行できます<div>。次にやりたいことは、画面の上部と左側から 50% 離して、高さ/幅の半分のマージンで絶対に配置することです。

それを行う方法については、次の JSFiddle を参照してください: http://jsfiddle.net/Lsh6j/1/

周囲の高さと幅にパーセンテージを使用することもできますが<div>、パーセンテージ ベースの高さが機能するには、<div>の親要素の高さが設定/認識されている必要があります。

于 2013-07-26T22:26:33.033 に答える