인라인 블록 CSS 속성의 정렬 문제

웹 사이트에서 그리드 메뉴를 만들려고합니다. 나는 이렇게하기 위해 display: inline-block을 사용하고 있는데, 아주 잘 작동하지만, 어떤 이유로 마지막 행은 정렬되지 않습니다.

나는 똑같은 문제가있는 display: inline-table을 시도했다. 텍스트가있는 각 사각형은 표시 속성이 인라인 블록으로 설정된 div 내에 포함되어 있습니다.

<div class="parcel"> 
    <a href="http://www.pizzahut.com"> 
    <img src="../img/computerGraphics.jpg"/> 
    Computer Graphics </a> 
</div> 
<div class="parcel"> 
    <img src="../img/web.jpg"/> 
    Web 
</div> 
<div class="parcel"> 
    <img src="../img/photography.jpg"/> 
    Photography 
</div> 
<div class="parcel"> 
    <img src="../img/models.jpg"/> 
    3D Modeling 
</div> 
<div class="parcel"> 
    <img src="../img/games.jpg"/> 
    Games 
</div> 
<div class="parcel"> 
    <img src="../img/graphicDesign.jpg"/> 
    Visual Design 
</div> 
<div class="parcel"> 
    <img src="../img/animation.jpg"/> 
    Animation 
</div> 
<div class="parcel"> 
    <img src="../img/illustration.jpg"/> 
    Illustration 
</div> 
<div class="parcel"> 
    <img src="../img/other.jpg"/> 
    Other 
</div>

누가 마지막 행을 사용했는지 아는 사람이 있습니까?

출처

2011-09-06 Russell Strauss

가능한 경우 페이지 URL을 제공 할 수 있습니까? 그것을 일으킬 수있는 문제를보기가 쉬울 것이므로. – Nathan

여기에 임시 링크를 업로드했습니다 : http://www.prism.gatech.edu/~jstrauss6/jrstrauss.net%20temp/original/myWork.html –

또는 동일한 작업을 수행하기위한 대체 방법이 있습니까? –

text-align: justify; (contentText) div는 div의 내용에 따라 작은 div에 공백을 넣습니다. text-align: justify;을 제거하거나 text-align:center에서 contentText으로 변경하면 정상적으로 작동합니다.

나는이 이상한 것을 발견한다. 나는 justify을 사용하려고 노력했다. 그리고 마지막 줄은 항상 신문 에서처럼 정당화하지 않는다.

출처

2011-09-06 01:06:27 dpp

+1 좋은 캐치 ... –

+1 이것은 100 % 정확하다 ... 나는 Chrome 개발자 도구에서 'text-align : center;'로 바꿨다. . 이 스크린 샷보기 : http://screencast.com/t/CWZ93DYVbgh – Nathan

큰 눈. 정말 고마워. –

여분의 HTML 및 CSS를 보지 않고도 말하기가 어렵지만 마지막 줄이 다르게 렌더링되도록하는 마지막 닫음 div 전에 링크 끊기 또는 일부 공백 또는 다른 요소가있을 수 있습니다. 하지만, 또한 추가 br 것을 제거

div.contentText { 
    text-align: justify; 
}

div.contentText { 
    text-align: center; 
}

에 변화 : 편집

당신이 지금 게시 @domanokz 잘되는 페이지를 참조했다 그것은 수정을 위해 필요하지 않았습니다.

출처

2011-09-06 00:48:55

인라인 블록 CSS 속성의 정렬 문제

답변

관련 문제