イメージの行の中央に配置するにはどうすればよいですか？

英語のメジャーはここにあります。私は実際には何も知らないので、コーディングについてはですので、VERY BASIC言語を使用してください。私は私の本出版クラスのウェブサイトを知る必要があります。私は私たちの "チームメンバー"ページの画像の行を整列しようとしています。それ、どうやったら出来るの？以下は、画像の最初の行です。今、彼らは左にシフトしています。イメージの行の中央に配置するにはどうすればよいですか？

<div id="main" class="container"> 
 

 

 

 
    <!-- First Set --> 
 
    <h3> Publishers </h3> 
 
    <div class="box alt"> 
 
    <div class="row 50% uniform"> 
 
     <!-- % changes space between pictures --> 
 
     <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Mike<br>Course Director</p></span></div> 
 
     <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Mackenzie<br>Publisher</p></span></div> 
 
     <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Liz<br>Associate Publisher</p></span></div> 
 
     <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Mia<br>Publishing Assistant</p></span></div> 
 
    </div> 
 
    </div>

出典

2017-11-14 Anna

お試しください。 ' – aaron

作業コードを入力してください。 –

使用<center>何かを中央にタグ...このことができます希望...

<h3> Publishers </h3> 
 
<center> 
 
     <div class="box alt"> 
 
      <div class="row"> <!-- % changes space between pictures --> 
 
       <div class="2u"><span class="image fit"><img src="images/headshots/mike.JPG" alt="" /><p> Mike<br>Course Director</p></span></div> 
 
       <div class="2u"><span class="image fit"><img src="images/headshots/mackenzie.JPG" alt="" /><p> Mackenzie<br>Publisher</p></span></div> 
 
       <div class="2u"><span class="image fit"><img src="images/headshots/liz.JPG" alt="" /><p> Liz<br>Associate Publisher</p></span></div> 
 
       <div class="2u"><span class="image fit"><img src="images/headshots/mia.JPG" alt="" /><p> Mia<br>Publishing Assistant</p></span></div>   
 
      </div> 
 
      
 
     </div> 
 
     </center>

出典

2017-11-14 03:47:43

<head> 
    <link rel="stylesheet" href="styles.css" type="text/css"/> 
</head>

このIフレックス

Styles.cssを

.row { 
    display: flex; 
    align-items: center;  /* vertical centering */ 
    justify-content: center; /* horizontal centering */ 
}

出典

2017-11-14 03:48:39

ます。また、CSSを学ぶためにこれを使用することができますで解決されたCSSでの深刻な問題がね。

.row { 
 
    text-align: center; 
 
}

<h3> Publishers </h3> 
 
     <div class="box alt"> 
 
      <div class="row"> <!-- % changes space between pictures --> 
 
       <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Mike<br>Course Director</p></span></div> 
 
       <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Mackenzie<br>Publisher</p></span></div> 
 
       <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Liz<br>Associate Publisher</p></span></div> 
 
       <div class="2u"><span class="image fit"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded" alt="" /><p> Mia<br>Publishing Assistant</p></span></div>   
 
      </div> 
 
     </div>

出典

2017-11-14 03:50:43 Ananda

次のようにコードを変更します。

<!-- First Set --> 
    <h3> Publishers </h3> 
    <div class="box alt"> 
     <div class="row 50% uniform" style="left: 50%;position: absolute;> <!-- % changes space between pictures --> 
      <div class="2u"><span class="image fit"><img src="images/headshots/mike.JPG" alt="" /><p> Mike<br>Course Director</p></span></div> 
      <div class="2u"><span class="image fit"><img src="images/headshots/mackenzie.JPG" alt="" /><p> Mackenzie<br>Publisher</p></span></div> 
      <div class="2u"><span class="image fit"><img src="images/headshots/liz.JPG" alt="" /><p> Liz<br>Associate Publisher</p></span></div> 
      <div class="2u"><span class="image fit"><img src="images/headshots/mia.JPG" alt="" /><p> Mia<br>Publishing Assistant</p></span></div>   
     </div> 
    </div>

出典

2017-11-14 03:56:24

イメージの行の中央に配置するにはどうすればよいですか？

答えて

関連する問題