3

これが私がCSSでやりたいことの画像です： image。

何か案は？

4

5 に答える 5

2

新規作成

明示的な幅がない要素を中央に配置する

これにより、通常の解決策がmargin: 0 auto;オプションになるのを防ぎます。

より大きな問題

ラッパーをコンテナの中央に配置するための未使用のスペースはありません

要素の幅がコンテンツの幅によって決定される場合、要素はシュリンクラップされていると言われます。コンテンツのサイズが変わると、要素の幅も同様に変わります。これは、インライン、インラインブロック、またはフロートの要素のデフォルトの動作です。

シュリンクラップされた親のコンテンツが次の行にラップアラウンドすると、親はシュリンクラップされなくなります。現在、それはそれ自身のコンテナの全幅を占めています。技術的には、親はコンテナを完全に満たすため、中央に配置されますが、コンテンツは中央に配置されません。また、親が目立つbgカラーまたは壁紙画像を持っていない限り、親も中央に配置されていないように見えます。

これは、CSS3フレックスボックスなどのより高度な機能の一部にも当てはまり、明らかにそれがオプションになるのを妨げています。

解決

メディアクエリ

単純なCSSソリューションがあることがわかりました。基本的な問題は、この種の単一のレイアウトグリッドでは、広範囲の画面サイズをサポートできず、コンテンツを中央に配置できないことです。ただし、CSS3メディアクエリを使用すると、画面サイズに基づいて適切なものを選択して、さまざまなレイアウトグリッドを作成できます。

たとえば、必要な数の列に対して、1列のレイアウトグリッド、2列のレイアウトグリッド、3列のレイアウトグリッドなどが作成されます。現在の画面サイズに合うグリッドがどれでも、それが使用されます。レイアウトグリッドは、それぞれに固定幅が指定されていることを除いて同じである可能性があります。幅は、列の数に収まるだけの大きさです。各グリッドの幅は固定されているため、を使用してグリッドを水平方向に中央揃えするのは簡単margin: 0 auto;です。

つまり、単一のレイアウトですべての範囲のブラウザーサイズを処理するのではなく、多くのレイアウトを作成し、現在のブラウザーサイズを簡単に処理できるレイアウトを選択します。

于 2013-03-05T18:18:13.827 に答える
0

CSSプロパティをラッパーに与えるだけです

#wrapper{
margin: 0px auto;
}

上記のコードは、ブラウザ ウィンドウのサイズを変更すると自動的に中央に配置されます。これは、ページに応答性を追加するプロセスです。

于 2013-03-05T17:11:53.880 に答える
0

メディア クエリ (および説明する複数のシナリオ) を実装するのが面倒なので、単純なソリューションを実装しました。画像を順序付けられていないリスト (ここで li {display: inline-block}) に入れ、次に (text-align: center) ラッパーを入れます。後で余白などを調整して、きれいにします。

<style>
    #wrapper {
        text-align: center;
    }
    #wrapper li {
        display: inline-block;
    }
</style>

<div id="wrapper">
    <ul>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
    </ul>
</div>
于 2013-10-23T14:33:02.197 に答える
0

すべての div を別の div 内に配置し、マージンを両側で自動にします。この包括的な例を参照してください: css を使用した問題のセンタリング div

于 2013-03-05T17:08:11.037 に答える
0

中央に配置する div には幅が必要で、マージンを auto に設定する必要があります。次に例を示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}

#wrapper{
width: 800px;
min-height: 200px;
margin: auto;
}

.block{
width: 100px;
height: 100px;
float: left;
}

</style>
</head>
<body>
<div id="wrapper">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
</body>
</html>
于 2013-03-05T17:15:44.693 に答える