текст вертикального выравнивания внутри div с elipsis

Question

У меня есть div с пролетом и img внутри. как диапазон, так и изображение должны быть выровнены по вертикали.

<div class="container"> 
    <img src="test.png"> 
    <span class="inner">this line can be 2-3 line with ellipsis</span> 
    </div> 

.container { 
    height: 72px; 
    width: 250px; 
} 
.test { 
    height: 64px; 
    width:64px; 
} 

img должно быть слева и текст рядом с ним. не может заставить его работать!

Answer 1

к vertical-align 2 элементов бок о бок, они должны быть отображены имеет инлайн Boxe.

или они должны действовать как table-cell или быть дочерним элементом flexbox.

Img не будет брать display-table-cell; и display:flex может быть сложно с img, давайте использовать inline-block.

Для многоточие, white-space, text-overflow и overflow должны быть использованы вместе. здесь с inline-block, нам также нужно указать width.

.container { 
 
    height: 72px; 
 
    width: 250px; 
 
    text-align: center; 
 
} 
 
img { 
 
    vertical-align: middle; 
 
} 
 
.test { 
 
    height: 64px; 
 
    width: 64px; 
 
} 
 
.inner { 
 
    width: 180px; 
 
    display: inline-block; 
 
    white-space: pre; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
}

<div class="container"> 
 
    <img src="http://dummyimage.com/64x64&text=test.png"> 
 
    <span class="inner">this line can be 2-3 line with ellipsis</span> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://dummyimage.com/64x64&text=test.png"> 
 
    <span class="inner">this line can be 2-3 line with ellipsis 
 
this line can be 2nd line with ellipsis</span> 
 
</div> 
 
<div class="container"> 
 
    <img src="http://dummyimage.com/64x64&text=test.png"> 
 
    <span class="inner">this line can be 2-3 line with ellipsis 
 
this line can be 2nd line with ellipsis 
 
this line can be the third line with ellipsis</span> 
 
</div>

Чтобы активировать многоточие на несколько строк, вы должны использовать white-space:pre; или <pre> тег и сделать разрыв строки внутри HTML-кода. text-overflow:ellipsis; обычно используется на одной строке и не будет доступен в тексте обертывания и просто показывается внизу коробки.

Answer 2

Вы можете сделать это работает с display: table-cell и vertical-align: middle свойствами:

.container { 
    display: table; 
} 
.inner { 
    height: 64px; 
    width:64px; 
    padding-left: 20px; 
    display: inline-block; 
} 

.container img, .container .inner { display: table-cell; vertical-align: middle;} 

Fiddle here

Answer 3

Это может работать, используя свойство

<div class="container"> 
    <img src="test.png"> 
    <span class="inner">this line can be 2-3 line with ellipsis</span> 
    </div> 
.container { 
    height: 72px; 
    width: 250px; 
} 
.container img{ 
    float:left; 
} 
.inner { 
    height: 64px; 
    width:64px; 
    float:left; 
    padding-left:10px; 
} 

JsFiddle