0

いくつかの画像をセンタリングするのに助けが必要です

HTML:

<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<br>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>
<li>
    <a class="thumb" href="#">
        <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
    </a>
</li>

CSS:

ul.thumbs {
    clear: both;
    padding-left: 0px;
}

ul.thumbs li {
    display: inline-block;
    /*float: left;*/
    padding: 0;
    margin: 5px 10px 5px 0;
    list-style: none;
}

a.thumb {
    padding: 2px;
    display: block;
    border: 1px solid #ccc;
}

ul.thumbs li.selected a.thumb {
    background: #DAA12F;
}

a.thumb:focus {
    outline: none;
}

ul.thumbs img {
    border: none;
    display: block;
    height: 120px;
    width: 120px;
    margin: 0px auto;
}

画像が整列したままになるように、画像を中央に配置する必要があります。私は使用してみました： 

ul.thumbs {
    text-align:center;
}

ただし、各行に異なる数の画像があるため、位置合わせがずれます

助けてくれてありがとう、これは私を夢中にさせています

編集:これをガイドとして使用して解決策を見つけたと思いました: http://www.tightcss.com/centering/center_variable_width.htmしかし、画像が行を超えると、中央に配置されなくなります。元々、行を分割するために br タグを配置して問題を修正しましたが、私が使用している JS ライブラリは、リスト項目間の br タグでは適切に機能しません。任意の提案 (ここで問題を確認できますhttp://jsfiddle.net/HvZva/26/ )

4

6 に答える 6

1

これには2つの解決策があります。1つは画像を中央に配置する場合、もう1つは画像を左揃えにしてページの中央に配置する場合です。

中央のブロック、画像 を左揃えこれを行うには、cssに以下を追加する必要があります（またはhttp://jsfiddle.net/HvZva/20/を参照） 。

ul.thumbs{
margin:0 auto;
width:416px;
}

私がやっていることは、基本的に、この順序付けられていないリストは両側に等しいマージンを持つべきであることをブラウザに伝えることです。ただし、このオブジェクトの幅は標準で100％なので、これも指定する必要があります。この場合は416pxです。

画像を中央揃え

これが静的コンテンツである場合、これを行う簡単な方法の1つは、各行をラップするcenterのクラスでdivを追加してから、「text-align：center;」を追加することです。それらのdivに、それはトリックを行います。

注：ブロックを中央に配置する新しい方法が1つありますが、画像を左に揃えます。しかし、それはボックスフレックスモデルとcss 3を含み、それはまだブラウザによって実装されていません

于 2012-07-27T16:38:28.353 に答える
0

text-align: center;.thumbs.noscript ul に適用すると、jsfiddle で修正されます

于 2012-07-27T15:39:43.357 に答える
0

親要素に幅を与えて適用できますmargin-left: auto; margin-right: auto;

http://jsfiddle.net/HvZva/13/

于 2012-07-27T15:45:58.523 に答える
0 
ul.thumbs {
    display:inline-block;
    text-align:center;
}
于 2020-03-17T02:55:39.400 に答える
-1

私はあなたの問題を誤解しているかもしれませんが、あなたが望むのはこのようなものですか? http://jsfiddle.net/HvZva/12/

于 2012-07-27T15:41:32.757 に答える
-1

このようなもの？http://jsfiddle.net/HvZva/11/

于 2012-07-27T15:40:43.240 に答える