выравнивание изображений

Question

Каков наилучший способ выравнивания изображений в списке. Я пытаюсь что-то вроде, и я ожидаю, что они будут видеть выровненные по вертикали друг под другом, но текст будет обертывать изображение.

• текст
• изображение
• текст

Answer 1

только с помощью поплавка влево, и это работа код понравится этот

HTML:

• текст здесь

<li> 
    <img src="" /> 
    text here 
</li> 
</ul> 

и CSS:

li img {float:left; vertical-align: top;} 

• извините за плохой ввод текста, я все еще изучаю, как набирать код здесь.
• если код еще неясен, пожалуйста, сообщите мне, я загружу свой полный код на свой компьютер.
• если дать вертикальной Align, чтобы сделать нумерацию пули переходит в верхнюю часть изображения

Answer 2

Чтобы удалить текст, поместить весь текст в плавающих элементов и положить clear: both в изображениях. При этом текст не будет обертывать изображение.

Answer 3

Я мог ошибаться, но похоже, что вы используете поплавки. Не нужно.

CSS:

#mylist li{ display: block } 

HTML:

<ul id="myLst"> 
    <li>text</li> 
    <li><img src="my-image.png" alt="" /></li> 
    <li>text</li> 
</ul> 

Это будет выравнивать каждый элемент списка один поверх другого.

Answer 4

В качестве альтернативы, вы можете использовать фонд или Bootstrap с их сетками. Затем вы можете выровнять изображения и текст в строке с помощью столбцов. Но быстрое и простое решение было бы использовать:

img{display:block;}