CSS - 画像をコンテナ内の中央に配置する

Question

コンテナ内にいくつかの画像を並べて表示しようとしています。これは、彼らが現在、私は完全に集中し、彼らはあまりにも右端にある上明らかなように座ってする必要がある

を見てどのようです。私はいろいろなことを試しましたが、それを正しくすることはできません。私は正しい要素を特定しているとは思わない。ここで

は問題が.images, .fourクラスのmargin-right: 100px属性によって引き起こされる写真

body { 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    max-width: 100%; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
section#welcome { 
 
    height: 500px; 
 
    max-width: 100%; 
 
} 
 

 
section#welcome div.row { 
 
    height: 250px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
#welcome h4 { 
 
    color: #000000; 
 
    font-size: 20px; 
 
    padding-top: 50px; 
 
    line-height: 5px; 
 
} 
 

 
section#welcome p { 
 
    font-size: 10px; 
 
    color: #bdc3c7; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%) 
 
} 
 

 

 
/* centering an image within a column */ 
 

 
section#welcome .four { 
 
    position: relative; 
 
    display: inline-block; 
 
    bottom: 50px; 
 
} 
 

 
.four h3 { 
 
    position: absolute; 
 
    color: #FFF; 
 
    font-size: 20px; 
 
    margin: 0; 
 
    top: 50%; 
 
    left: 55%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
section#welcome img { 
 
    display: block; 
 
    margin-bottom: 30px; 
 
} 
 

 
.images, 
 
.four { 
 
    margin-right: 100px; 
 
}

<section id="welcome"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="twelve columns"> 
 
     <h4>WELCOME TO FEATURE MEDIA</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque 
 
      facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus 
 
      ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis 
 
      lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p> 
 
     </div> 
 
    </div> 
 
    <hr class="hrindeximages"> 
 
    <div class="images row"> 
 
     <div class="four columns"> 
 
     <div id="video"> 
 
      <h3>VIDEO</h3> 
 
      <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;"> 
 
     </div> 
 
     </div> 
 
     <div class="four columns"> 
 
     <div id="blog"> 
 
      <h3>BLOG</h3> 
 
      <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;"> 
 
     </div> 
 
     </div> 
 
     <div class="four columns"> 
 
     <div id="faq"> 
 
      <h3>FAQ</h3> 
 
      <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

上のセクションのための私のコードです。あなたはそれを取り除く場合は、あなたのイメージを中心にする必要があります：あなたはまだあなたのイメージの間でそのスペースを持っているしたい場合は

.images, .four { 
    margin-right: 100px; // this line causes your images to offset from center 
} 

は、あなたがそれのバランスを取るためにmargin-leftフィールドを追加することができます。

.images, .four { 
    margin-right: 50px; 
    margin-left: 50px; 
} 

Answer 2

パディングアトリビュートを使用して、画像を手動でセンタリングします。

Answer 3

これはあなたを助けるかもしれません。 @yelqが言ったように

.images { text-align: center; width: 100%; }

Answer 4

、margin-right:100pxを取り除きます。

さらに柔軟にするために、display: flexプロパティを使用し、marginの短い表記を使用して、ピクチャ間の区切りを1か所で変更できるようにします。

rowを<div class="images row">から削除する必要はありません。あなたのCSSで

は、それを変更します。

.images, .four { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    margin: 0 50px; 
    /*margin-right: 100px;*/ 
} 

私もimg要素にスタイルを削除し、再度、変更の包みより簡単に開発を可能にするために、CSSにそれを追加します。

.images img { 
    width:300px; 
    height:150px; 
}