Вертикальное выравнивание изображение и текст на список элементов с помощью CSS

Question

я пытаюсь вертикального выравнивания изображения слева и текст справа с помощью <li> создать две колонки, как это:

space space space text1 space space space text1 
space [image] space text2 space [image] space text2 
space space space text3 space space space text3 

space space space text1 space space space text1 
space [image] space text2 space [image] space text2 
space space space text3 space space space text3 

Каждое изображение имеет максимум 100x100 пикселей. Они разных размеров. Если изображение меньше 100 на 100, оно должно выровняться по вертикали и горизонтали, как показано выше.

Вопросы:

1. Текст не будет идти в правой части изображения.
2. Изображение выровнено по вертикали, но не горизонтально.

Это выглядит следующим образом:

space space space space space space 
[image] space space [image] space space 
space space space space space space 
text1     text1 
text2     text2 
text3     text3 

space space space space space space 
[image] space space [image] space space 
space space space space space space 
text1     text1 
text2     text2 
text3     text3 

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

Для тех, кто не знает Coldfusion, то CFQUERY просто петля для числа элементов, возвращенных из запроса к базе данных:

.hcr ul { 
 
    padding: 8px 5px; 
 
    margin: 0; 
 
} 
 
.hcr li { 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
    width: 240px; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    zoom: 1 
 
} 
 
.hcr .wrap { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    border: 1px solid #ddd 
 
} 
 
.hcr .image { 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100px; 
 
    max-height: 100px; 
 
    vertical-align: middle; 
 
} 
 
.hcr img { 
 
    float: left; 
 
    display: inline; 
 
    margin-right: 10px 
 
}

<div class="hcr"> 
 
    <ul> 
 
    <cfoutput query="querylist"> 
 
     <li> 
 
     <span class="wrap"> 
 
    <a href="some.html"><img src="#image#" class="image"></a> 
 
    </span> 
 
     <a href="some.html">#text1#</a> 
 
     <div>#text2#</div> 
 
     <div>#text3#</div> 
 
     </li> 
 
    </cfoutput> 
 
    </ul> 
 
</div>

Любая помощь очень ценится. Спасибо.

EDITED:

Я решил один из вопросов, для текста, окружив текстовую часть с:

.hcr .wrap2 { 
    width: 100px; 
    height: 100px; 
    display: table-cell; 
} 

<div class="hcr"> 
    <ul> 
    <cfoutput query="querylist"> 
     <li> 
     <span class="wrap"> 
     <a href="some.html"><img src="#image#" class="image"></a> 
     </span> 
     <span class="wrap2"> 
     <a href="some.html">#text1#</a> 
     <div>#text2#</div> 
     <div>#text3#</div> 
     </span> 
     </li> 
    </cfoutput> 
    </ul> 
</div> 

Изображения еще не центрируется по горизонтали.

Answer 1

Как и в моем редактирования, путем оборачивания текстовой части со следующей решимостью один из вопросов текста не движущуюся вправо:

.hcr .wrap2 { 
    width: 100px; 
    height: 100px; 
    display: table-cell; 
} 

<div class="hcr"> 
    <ul> 
    <cfoutput query="querylist"> 
     <li> 
     <span class="wrap"> 
     <a href="some.html"><img src="#image#" class="image"></a> 
     </span> 
     <span class="wrap2"> 
     <a href="some.html">#text1#</a> 
     <div>#text2#</div> 
     <div>#text3#</div> 
     </span> 
     </li> 
    </cfoutput> 
    </ul> 
</div> 

Вторая проблема решена путем удаления строки float: left; из IMG

.hcr img { 
    display: inline; 
    margin-right: 10px 
} 

Вы можете увидеть его на fiddle Это не полностью центрированный из-за разницы 10px о праве на расстояние между изображением и текстом.

Answer 2

Учитывая, что свойства CSS float и table не были предназначены для построения макетов, ваш код слишком сложный. Не то чтобы это было невозможно, или даже традиционно и популярно, это просто не самый простой или эффективный способ выполнить задачу.

Если вы открыты для более современной техники, то создание макета будет проще и проще. В частности, Flexbox в CSS3 может быть полезен в этом случае.

.hcr li { 
 
    display: flex;     /* 1 */ 
 
    width: 240px; 
 
    padding: 5px; 
 
    border: 1px dashed black; 
 
} 
 

 
.wrap1 { 
 
    align-self: center;    /* 2 */ 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.wrap2 { 
 
    flex: 1;       /* 3 */ 
 
    display: flex;     /* 4 */ 
 
    flex-direction: column;   /* 5 */ 
 
    justify-content: space-around; /* 6 */ 
 
    align-items: center;    /* 7 */ 
 
    border: 1px dashed red; 
 
} 
 

 
.hcr .image { 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100px; 
 
    max-height: 100px; 
 
}

<div class="hcr"> 
 
    <ul> 
 
    <cfoutput query="querylist"> 
 
     <li> 
 
     <div class="wrap1"> 
 
      <a href="some.html"> 
 
      <img src="http://lorempixel.com/100/100/" class="image"> 
 
      </a> 
 
     </div> 
 
     <div class="wrap2"><!-- new container --> 
 
      <a href="some.html">#text1#</a> 
 
      <div>#text2#</div> 
 
      <div>#text3#</div> 
 
     </div> 
 
     </li> 
 
    </cfoutput> 
 
    </ul> 
 
</div>

Примечания:

1. Создание гибкого контейнера (дочерние элементы [ака, гибкие элементы] будут выстраиваться в ряд по умолчанию).
2. Контейнер изображений (первый ребенок) всегда будет вертикально центрирован в родительском контейнере.
3. Контейнер для текста (второй ребенок) будет потреблять всю оставшуюся ширину родительского контейнера.
4. Установите вложенный гибкий контейнер (для применения гибких свойств к детям).
5. Резервные элементы будут выровнены по вертикали.
6. Spread three text elements evenly.
7. Горизонтально центральной колонке текстовых элементов.

---

Поддержка браузеров:

Flexbox поддерживается всеми основными браузерами, except IE 8 & 9.

Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют vendor prefixes.

Для быстрого ввода всех необходимых префиксов используйте Autoprefixer.

Подробнее в this answer.