2013-04-18 3 views
1

안녕하세요. 문제를 해결하는 데 어려움을 겪고있는 작은 문제입니다. 기쁨없이 수직 정렬을 시도하고 아이디어가 부족합니다. 제목은 한 줄을 차지하면 아래 그림 제목은 그 지역의 상단을 향해 앉아있는 이유 FrontPage를 블록 HEREDiv의 텍스트 센터 맞추기

당신은 볼 수 있습니다. 아래 사진과 그룹 제목 사이의 중간에 표시되도록하고 싶었습니다. 누구든지 아무거나 제안 할 수 있 었는가? 내가 표시로

감사

ul.views-fluid-grid-items-center li.views-fluid-grid-item { 
     background: none repeat scroll 0 0 black; 
     position: relative; 
    } 

    li.views-fluid-grid-item .views-field-title { 
     padding: 0 4px; 
    } 
+0

어떤 제목과 그림이 그 것이다. –

+1

[링크 된 텍스트를 세로로 가운데 맞추는 방법을 보여주는 링크] (http://css-tricks.com/vertically-center-multi-lined-text/) – soyuka

답변

3

은 당신의 웹 사이트에있는 모든 검은 부분은 단지 vertical-align: middle와 함께 display: table-cell를 사용, 높이가 고정되어

li.views-fluid-grid-item .views-field-title a { 
    color: #AAAAAA; 
    display: table-cell; 
    height: 40px; /* Fix appropriate height here */ 
    vertical-align: middle; 
} 
+1

한 줄 텍스트는 가운데 정렬되지 않습니다. 'inline-block'을 부모에'.field-content'와'text-align : center'를 추가하십시오. – soyuka

+1

당신의 모든 도움에 감사드립니다. 아프 기분을 들여서 다시 읽으십시오. tx –

+0

@RegGordon 환영합니다 :) –

1

당신은 추가 할 수 있습니다 당신은 갈 수 있습니다 line-height: 37px; to li.views-fluid-grid-item .views-field-title a

그러나 두 줄로가는 텍스트를 잘라야합니다.

편집 : 여기에 참조 용으로 남겨 두겠다.하지만 나는 Alien 씨의 대답을 더 좋아한다.

+1

텍스트가 한 줄에 없으면 어떻게됩니까? –

+0

싱글 라인과 더블 라인에서 괜찮을 것 같습니다. 필자는 제목 길이가 제한되어 있고 지금까지 그렇게 좋아. 아, 대니 선생님에게 말씀하시는 것을 보았습니다. 대니 감사합니다. soyuka 덕분에. 필자도 코드를 추가했는데 잘 작동합니다. 또한 나는 당신의 링크를 읽으 러 갈 것이다. 나는 css를 천천히 집어 들었다. 겨우 7 년 동안 나를 데려 갔어. –