Здравствуйте! Пожалуйста, подскажите, как сделать так, чтобы изображение в блоке было выровнено по вертикали и горизонтали относительно всего блока и оставалось слева от текста. А текст чтобы размещался посредине блока по вертикали и оставался справа от изображения. Нужно адаптивное решение, чтобы блок правильно отображался на всех устройствах. Сам код разместила тут https://jsfiddle.net/StKo/28x3r4wv/4/
Попробуйте так Код (CSS): .wrapper { background-color: rgb(252, 71, 20, 0.06); border-radius: 10px; margin: 20px 0 20px 0; padding: 20px 20px 20px 0; } .wrapper_pictures { width: 100px; height: 100px; overflow: hidden; display: table-cell; } .picture { width: auto; height: 100%; max-height: 100px; } .text{ padding: 5px 5px 5px 20px; vertical-align: middle; display: table-cell; }
Код (CSS): .wrapper { background-color: rgb(252, 71, 20, 0.06); border-radius: 10px; margin: 20px 0 20px 0; padding: 20px 20px 20px 0; } .wrapper_pictures { width: 20%; height: 100px; overflow: hidden; float: left; } .picture { width: 70%; height: 100%; } .text{ width: 80%; padding: 5px 5px 5px 20px; }
Большое спасибо! Ваш вариант очень хорош для небольшого текста и среднего объема https://jsfiddle.net/StKo/v9t6nosk/. А вот большой текст длинее картинки https://jsfiddle.net/StKo/xLj08dac/. Это как-то можно исправить? --- Добавлено --- Спасибо Вам за подсказки. Но немного искажаются картинка и текст https://jsfiddle.net/StKo/k56f9gj7/2/ и https://jsfiddle.net/StKo/fpcq2zor/1/
Код (CSS): .wrapper_pictures { width: 100px; height: 100px; overflow: hidden; display: table-cell; vertical-align: middle; }
Вот, что значит специалист! За несколько секунд все поправил. И решения вроде простые. Но не смогла додуматься. Спасибо Вам!