1

自分の中にある画像を中央に配置し、コンテナ内に中央に配置する方法を見つけようとしています。2列に8つの画像があり、行ごとに2つの画像が左揃えになっています。私はそれらを中央に揃える必要があります。

ここで中央に配置する方法を見つけました： divの中央に複数の画像を水平方向に配置します

ブロックレベルのアイテムをフローティングすると、アイテムが左または右にプッシュされます。IMGの「display：inline-block」。そして、floatステートメントとpositionステートメントを削除します。次に、コンテナdivの「text-align：center」。

ただし、この方法では、すべての画像が1つの列にまとめられます。どんな助けでもいただければ幸いです。

コンテナと画像を制御するCSSは次のとおりです。

.container {
    width: 452px;
    height: 750px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 11px;
      }


      .item a img {
    width: 150px;
    height: 160px;
    box-sizing: border-box;   
    float: left;
    padding: 3px;
    background-color: #FFF;
    margin: 5px;
    border: 1px solid #cccccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 0.7;
      }

これがhtmlです：

<div class="container clearfix">
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/01.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/01t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/02.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/02t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div><p>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/03.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/03t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/04.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/04t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/05.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/05t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/07.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/07t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>

    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/06.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/06t.JPG" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>
    <div class="item"><a rel="clearbox[gallery=Gallery,,comment=Dirty South Ink Tattoo Shop Photo]" href="../images/Dustin/10.JPG" title="Dirty South Ink Tattoo Shop Photo"><img class="border" src="../images/Dustin/thumbs/10t.jpg" alt="Dirty South Ink Tattoo Shop Photo" /></a></div>

4

2 に答える 2

0

DIVの幅が十分でなかったため、最初の試みの画像は1つの列に強制された可能性があります。画像の幅は150px+2x3pxのパディング+2x5pxの余白+2x1pxの境界線=168pxです。

多くのブラウザはまだサポートしていないbox-sizing:border-boxので、今のところ、それを避けたほうがよいでしょう。そうしないと、一貫性のない結果になります。

を削除しbox-sizing:border-boxてコンテナの幅を336pxにすると、画像が中央に配置されます。または、次のCSSを使用して画像を内部コンテナにラップすることもできます。

.inner_container{
  width:336px;
  margin-left:auto;
  margin-right:auto;
}

JSFiddle

もちろん、古いバージョンのIEにも対応する必要がありますが、これで最新のブラウザーの目標を達成できるはずです。

于 2013-01-05T14:53:38.373 に答える
0

上記の答えは正しいですが....私は追加の内部ラッパーとtext-align：centerを使用します。クロスブラウザ互換にするためのプロパティ。さまざまなタスクでこれを数回理解する必要がありました...基本的には常に同じ手法に戻ります。通常のブロック要素とtext-align：centerのように機能する追加の内部ラッパーを使用します。クロスブラウザ互換にするためのプロパティ。中央に留まるように設定またはフロートするものはすべて^。^幅とパディングを調整して、行を2つまたは3つにするか、どれだけ離れていても必要です。

CSSの例：

#container {
    width: 100%;
    text-align: center;
}
.innerwrap {display:inline-block;}
.innerwrap div{
   padding:5px;
   margin:5px;
   float: left;
}

コードで使用：http： //jsfiddle.net/cwk6nd9c/1/

于 2014-09-24T09:26:03.907 に答える