프로필 사진과 제목을 CSS 맞춤으로 결합하십시오.

-1

프로필 사진과 텍스트 (제목)를 내 tumblr theme에 결합하려고합니다.프로필 사진과 제목을 CSS 맞춤으로 결합하십시오.

정렬에 문제가 있습니다. 나는 또한 반응이 좋은 견해가 필요하다. 제목이 큰에 도달하면 (, 그것은에 해당한다 - made a picture to illustrate

CSS

#header .user-portrait { 
border-radius: 100%; 
width: 40px; 
height: 40px; 
margin-right: 18px; 
display: inline-block; 
vertical-align: middle; 
float: left; 
} 

#header a { 
font-weight: bold; 
display: block; 
margin-bottom: 34px; 
vertical-align: top; 
} 

#description { 
color: {color:Description}; 
padding-right: {text:Minus width for header in px}px; 
} 

#page-masthead ul { 
margin: 0; 
list-style-type: none; 
display: block; 
clear: both; 
line-height: 1.92em; 
padding-right: {text:Minus width for header in px}px; 
}

HTML :.

<div id="page-masthead"> 
<div id="header"> 

<a href="/"><img src="{PortraitURL-40}" alt="" class="user-portrait"></a> 

{block:IfShowblogtitle} 
<a href="/">{Title}</a> 
{/block:IfShowblogtitle} 
</div>

출처

2014-09-02 Sindre

미디어 쿼리 코드를 게시 할 수 있습니까? 그래서 당신을 위해 작성된 코드를 얻을 수있는 곳이 아닙니다. – mikedidthis

@mikedidthis 내 q를 불명확하게해서 죄송합니다. 설명하기 위해 만든 그림은 평범함을 위해 내가 원하는 정렬과 제목이 붕괴 될 필요가 있는지 보여줍니다. 지금은 텍스트와 이미지가 붕괴 될 필요가 있다면 서로 다른 라인이됩니다. 텍스트/제목은 아바타 한 가운데 정렬되어야합니다. – Sindre

다시 한 번 전체 코드를 표시하십시오. 현재이 질문은 CSS에 대한 최소한의 이해가 부족합니다. – mikedidthis

폭이 작은만큼 사용이 때 가장 좋은 방법은 다음과 같은 미디어 쿼리

@media only screen and (max-width: ??px) { 

    #header .user-portrait { 
     float: none; 
     margin: 0 auto /* To center the "span" or whatever you're using */ 
    } 

}

출처

2014-09-02 23:54:05

뿐만 아니라 반응. 모든 크기에서 작동해야합니다. – Sindre

당신의 사이트가 완전히 "반응 적"이라면 "반응하는"것은 "모든 크기"에서 작동해야합니다. –

프로필 사진과 제목을 CSS 맞춤으로 결합하십시오.

답변

관련 문제