이미지 옆에 세로줄이있는 여러 줄의 세로 텍스트

아래 코드 (그리고 내가 시도한 몇 가지 다른 변형)를 사용하면 브라우저 창을 축소하면 텍스트가 여러 줄로 표시되고 다음 줄은 항상 이미지 아래로 떨어집니다 나는 그 텍스트의 왼쪽에있다. 결과 다중 선 텍스트를 이미지 옆에 세로로 정렬 된 상태로 유지하려면 어떻게해야합니까? 한 줄의 텍스트는 이미지 옆에 여러 가지 해결책이 있지만 여러 줄 텍스트는 보이지 않았습니다.이미지 옆에 세로줄이있는 여러 줄의 세로 텍스트

<div id="printnotice" style="float:left;margin-top:5px;margin-bottom:10px;width:95%;text-align:center;"> 
    <div style="float:left;margin:auto;display:block;">  
     <img style="align:left;vertical-align:middle;" alt="STOP" src="/Portal Content/Home/Stop"> 
     <span style="margin-left:20px;font-family:Calibri;font-size:1.5em;">Required: Print Registration Information and Support Options and give to customer</span> 
    </div> 

</div>

출처

2014-04-04 jwrit

대신 인라인 스타일의 스타일 시트를 사용하십시오 : http://jsfiddle.net/D6P48/ – Oriol

어떤 없다' 정렬 '특성을 갖는다. – Oriol

[CSS 사용 이유] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS)를 확인하십시오. –

Demo

당신이 할 수있는

그 이미지를 떠 텍스트 래퍼로 overflow: hidden를 추가 : 당신이 verticaly 이미지 옆에 정렬 할 수있는 권리의 텍스트를해야하는 경우

#printnotice img { 
    float: left; 
} 
#printnotice span { 
    overflow: hidden; 
    display: block; 
}

출처

2014-04-04 22:19:05 Oriol

, 사용할 수 있습니다 display:table; 및 display:table-cell;

이것을 참조하십시오 FIDDLE

HTML :

<div id="printnotice"> 
    <div> 
     <span><img alt="STOP" src="http://lorempixel.com/output/food-h-g-198-256-8.jpg" /></span> 
     <span>Required: Print Registration Information and Support Options and give to customer</span> 
    </div> 
</div>

CSS :

이

#printnotice { 
    float:left; 
    margin-top:5px; 
    margin-bottom:10px; 
    width:95%; 
    text-align:center; 
} 
#printnotice div { 
    float:left; 
    margin:auto; 
    display:table; 
} 
#printnotice span { 
    display:table-cell; 
    vertical-align:middle; 
    margin-left:20px; 
    font-family:Calibri; 
    font-size:1.5em; 
}

출처

2014-04-04 22:31:48

이미지 옆에 세로줄이있는 여러 줄의 세로 텍스트

답변

관련 문제