CSS centering 부동 div

Question

이 centering div 문제는 결코 사라지지 않을 것입니다! 내가 도움이 필요해 ... 어떤 이유로 든 응답이없는 전체 인터넷에서도 여러 개의 부동 div를 센터링 할 수 없었습니다. !! (나는 문제가 무엇입니까?)

 .middle { 
 
     margin-top: 40px; 
 
     border-radius: 10px; 
 
     width: 100%; 
 
     background: #ffffff; 
 
     bordder-radius: 10px; 
 
     border: thin solid #777; 
 
     box-shadow: 0 0 10px #888; 
 
     padding: 5px 10px; 
 
     text-align: center; 
 
     overflow: hidden; 
 
     display: inline-block; 
 
     text-align: center; 
 
    } 
 
    .vidtyp { 
 
     float: left; 
 
     padding: 5px; 
 
     margin: 30px 30px; 
 
     border: thin solid #BBB; 
 
     border-radius: 10px; 
 
     display: inline-block; 
 
     box-shadow: 0 0 1px #000; 
 
    } 
 
    .vidtyp img { 
 
     width: 250px; 
 
     height: 250px; 
 
    } 
 
    .vidtyp:after { 
 
     clear: both; 
 
     content: ""; 
 
     display: table; 
 
    }

<div class="middle"> 
 
    <br> 
 

 
    <div class="vidtyp"> 
 
    <img src="">1 
 
    <br>Movies</div> 
 
    <div class="vidtyp"> 
 
    <img src="">2 
 
    <br>Series</div> 
 
    <div class="vidtyp"> 
 
    <img src="">3 
 
    <br>Anime</div> 
 
    <div class="vidtyp"> 
 
    <img src="">4 
 
    <br>Fun</div> 
 
    <div class="vidtyp"> 
 
    <img src="">5 
 
    <br>Fun</div> 
 

 
    <br> 
 
    <br> 
 
</div>

누군가가 내 문제는 여기에 지적하시기 바랍니다 수 있습니까? 나는 CSS를 끝내고 테이블로 돌아 가기 직전에 모든 것을 시도했다. 나는 그럭저럭 1 개의 div를 중심에 둘 수 있었다. 그러나 결코 결코 뜨지 않는. .. 내가 구경하는 거의 모든 웹 사이트는 같은 물건을 말한다.. 그러나 나는 그것을 결코 만들지 않았다.

도와주세요.

Answer 1

float: left;을 .vidtype에서 제거하면 중심에 위치합니다.

---

.middle 
 
{ 
 
    margin-top:40px; 
 
    border-radius:10px; 
 
    width:100%; 
 
    background:#ffffff; 
 
    border-radius: 10px; 
 
    border: thin solid #777; 
 
    box-shadow: 0 0 10px #888; 
 
    padding: 5px 10px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.vidtyp 
 
{ 
 
    padding:5px; 
 
    margin: 30px 30px; 
 
    border: thin solid #BBB; 
 
    border-radius:10px; 
 
    display:inline-block; 
 
    box-shadow: 0 0 1px #000; 
 
} 
 
.vidtyp img 
 
{ 
 
    width:250px; 
 
    height:250px; 
 
} 
 
.vidtyp:after { 
 
    clear: both; 
 
    content: ""; 
 
    display: table; 
 
}

<div class="middle"> 
 
    <div class="vidtyp"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <p>Movies</p> 
 
    </div> 
 
    <div class="vidtyp"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <p>Series</p> 
 
    </div> 
 
    <div class="vidtyp"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <p>Anime</p> 
 
    </div> 
 
    <div class="vidtyp"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <p>Fun</p> 
 
    </div> 
 
    <div class="vidtyp"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <p>Fun</p> 
 
    </div> 
 
</div>

또한 당신은 내가 해결 한 코드에서 약간의 오차가 있습니다.

1. <img> 태그는 항상이 <img src="pathtoimage.jpg" alt="" /> 같은 폐쇄 /와 alt="" 속성을 포함해야합니다.

   HTML이 정확한지 확실하지 않은 경우 확인을 위해 W3C Validation Service을 통해 실행할 수 있습니다.

2. <p> 또는 <div>과 같이 블록 요소에 내용을 래핑하지 말고 <br>을 사용하여 새 줄을 작성하지 마십시오. 블록 요소가 자동으로 새 줄에 표시됩니다.

3. bordder-radius:10px;은 맞춤법이 틀린 CSS 속성이며 유효하지 않습니다. border-radius:10px;

4. 마지막으로 반드시 코드를 들여 쓰기하고 올바르게 형식을 지정해야합니다. 그러면 실제로 다른 사람과 함께 작업하기가 더 쉽습니다. 예쁘고 깨끗한 코드는 다른 사람에게 도움을 요청할 계획이라면 항상 목표로 삼아야 할 것입니다.

데모 : http://jsfiddle.net/9my9Lbon/2/

Answer 2

메신저를 종료하고 테이블로 돌아 가기.

첫째는, 당신은 다른 사업부에 떠있는 div를 포위 할 필요가

^그렇게하지 않습니다. 주변 div의 값을 margin: 0 auto;

으로 설정하십시오. 또한 중단을 사용하여 작업을 중단하십시오. 그것은 마진이있는 것입니다.

CSS 및 HTML을 이해하는 데 어려움이있는 경우 Code Academy은 무료이며 빠른 시일 내에 배우는 데 도움이됩니다.

행운을 빈다.