이미지의 행을 가운데에 배치하려면 어떻게합니까?

영어 major; 나는 실질적으로 을 알고 있습니다. 코딩에 관해서는입니다. 따라서 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>

이 내가 플렉스

을 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

이미지의 행을 가운데에 배치하려면 어떻게합니까?

답변

관련 문제