2017-01-26 9 views
-1

어떻게 이미지를 왼쪽 (글 머리 기호 스타일) 및 텍스트를 가운데에 정렬합니까? 이 그들이 보는 방법은 다음과 같습니다 동일한 div 내에서 이미지와 텍스트를 다르게 정렬

<div class="col-sm-6"> 
    <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    TEX TEXT TEXT TEXT TEXT TEXT TEXT 
</div> 

<div class="col-sm-6"> 
    <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    TEXT TEXT TEXT TEXT 
</div> 

는 지금의 divstext-align: left이 명백하게 이미지와 텍스트 모두 왼쪽으로 이동하지만, 이미지가 완벽하게 verticaly 정렬과 나는 DIV의 중심에서 그들을합니다. This is how it looks now What i want

+0

이와 비슷한가요? https://jsfiddle.net/mu7gvLtq/ – Stickers

+0

바이올린을 제공해 주시겠습니까? 그게 당신이 뭘 원하는지 이해하기가 어렵습니다 ... –

+0

@ Pangloss 나는 그것을 시도했지만 위의 이미지와 수직으로 정렬 된 두 번째 div의 이미지를 만들지 않습니다 –

답변

1

이 같은 수직 정렬을 시도 할 수 있지만,이 기간에 텍스트를 포장해야합니다 :

<div class="col-sm-6"> 
    <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    <span>TEX TEXT TEXT TEXT TEXT TEXT TEXT</span> 
</div> 

<div class="col-sm-6"> 
    <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    <span>TEXT TEXT TEXT TEXT<span> 
</div> 

img, span{ 
    vertical-align:middle; 
} 

확인 만 수직 정렬을 필요하다고 생각. 이 시도 :

업데이트 답 :

<div id="wrap"> 
    <div class="col-sm-6"> 
    <img src="http://www.tevel.cn/en/images/apple/dot.png"> 
    <span>TEX TEXT TEXT TEXT TEXT TEXT TEXT</span> 
    </div> 
    <div class="col-sm-6"> 
    <img src="http://www.tevel.cn/en/images/apple/dot.png"> 
    <span>TEX TEXT TEXTT</span> 
    </div> 
</div> 

img{ 
    margin-right:5px; 
    margin-top:3px; 
} 
#wrap{ 
    text-align:center; 
} 
div{ 
    clear:both; 
    margin-left:30px; 
} 
img, span{ 
    float:left; 
} 

업데이트 응답 항목이 수평 용기의 중간에 항상 유지되도록 : 당신이 (부트 스트랩을 사용하는 경우

<div id="wrap"> 
    <div id="innerWrap"> 
     <div class="col-sm-6"> 
      <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
      <span>TEX TEXT TEXT TEXT TEXT TEXT TEXT</span> 
     </div> 
     <div class="col-sm-6"> 
      <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
      <span>TEX TEXT TEXTT</span> 
     </div>     
    </div> 
</div> 

    #wrap{ 
    text-align:center; 
    } 
    #innerWrap{ 
     display:inline-block; 
    } 
    img,span{ 
     vertical-align:middle; 
    } 
    .col-sm-6{ 
     text-align: left; 
    } 
+0

그들은 div의 왼쪽에 맞춰 유지 –

+0

글쎄,이 실제로 정적 화면에 대해 잘 작동하지만, 브라우저 창 너비가 증가하면, 그것은 동일한 지점에 남아 있습니다. 목표는 모든 화면 크기의 중간에 머물러있게하는 것입니다. –

0

난 그렇게 생각)이 작업을 수행해야합니다.

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div> 
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    </div> 
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
     TEX TEXT TEXT TEXT TEXT TEXT TEXT 
    </div> 
    </div> 

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
     <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    </div> 
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
     TEX TEXT TEXT TEXT TEXT TEXT TEXT 
    </div> 
    </div> 
</div> 
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div> 

작동 예 : http://www.bootply.com/RqjSoFQEOU

부트 스트랩 그리드 문서 : 예 작업

<div style="text-align: left; width: 400px; margin-right: auto; margin-left: auto;"> 
    <div class="col-sm-6"> 
    <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    TEX TEXT TEXT TEXT TEXT TEXT TEXT 
    </div> 
    <div class="col-sm-6"> 
    <img src="{{ asset(assetsPath ~ '/path/to/image.png') }}"> 
    TEXT TEXT TEXT TEXT 
    </div> 
</div> 

: 당신은 부트 스트랩 사용하지 않는 경우 http://getbootstrap.com/css/#grid


당신이 이런 일을 할 수 https://jsfiddle.net/jqg7s839/1/

부트 스트랩과 함께 두 번째 솔루션을 사용하려면 col-sm-6 클래스를 제거해야합니다. 둘 다 한 줄로 표시됩니다. (6 + 6 = 12) 자세한 정보는 부트 스트랩 그리드 설명서를 참조하십시오. :)

+0

'

'은 더 이상 사용되지 않습니다. 내 생각에 비추천이란 말은 느린 말입니다.'
', ''등과 같이 오래된 마크 업을 사용하지 마십시오. 낙심됩니다. –

+0

실제로 부트 스트랩을 사용하고 있지만 @Alex의 응답자와 같이 고유 한 창 크기에서만 작동합니다. –

+0

방금 ​​답변을 업데이트했습니다. 두 솔루션 모두 각 창 크기에서 작동해야합니다. 그것을 한번보세요. 내가 당신의 문제를 해결할 경우 올바른 대답으로 표시하십시오 :) –

관련 문제