이 같은 수직 정렬을 시도 할 수 있지만,이 기간에 텍스트를 포장해야합니다 :
<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;
}
이와 비슷한가요? https://jsfiddle.net/mu7gvLtq/ – Stickers
바이올린을 제공해 주시겠습니까? 그게 당신이 뭘 원하는지 이해하기가 어렵습니다 ... –
@ Pangloss 나는 그것을 시도했지만 위의 이미지와 수직으로 정렬 된 두 번째 div의 이미지를 만들지 않습니다 –