Css несколько картинок выровнять

Несколько изображений в одной строке

Добрый день! Вчера под-дня провисел над задачей, но самому решить не получилось.
Есть множество изображений 200×200 пикселей. Под каждым из них требуется задать описание, причем текст должен быть выравнен по центру (смотри вложение). В свою очередь само множество изображений (с соответствующими описаниями)должно быть выравнено по центру страницы.
Хочу сделать так, чтобы в зависимости от устройства (монитор ПК, дисплей планшета, дисплей телефона) эти условные «кубики», сами заполняли имеющееся пространство сверху вниз и слева направо (как обычный текст). Например, на мониторе ПК, в одной строке будут помещаться 5 картинок (смотри вложение). На планшете — 3, а на телефоне по одной в строке, то есть друг над другом.
И повторюсь, само множество изображений (с соответствующими описаниями)должно быть выравнено по центру страницы.

Помогите пожалуйста разобраться.

Сделать несколько внутренних ссылок на одной строке
Как сделать несколько внутренних ссылок на одной строке чтоб они не объединялись одной линией?

Несколько изображений к одной новости без перезагрузки страницы YII
Использую yii. Есть форма создания новости, задача — пользователь загружает несколько изображений.

Загружать несколько файлов изображений и прикрепить к одной записи в базе
Всем привет! Кто-нибудь может подсказать скрипт или объяснить как прикрепить несколько файлов.

Несколько Char в одной строке
Добрый день. У меня такой вопрос. Если при введении переменной типа char указать несколько символов.

А что не получалось? Задать блокам inline-block и в зависимости от размера экрана устанавливать (при помощи @media) размер блоков, которые помещаются в одной строке.

.wrapper { text-align: center; } figure { display: inline-block; text-align: center; } figure img { height: 200px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

div class="wrapper"> figure> p>img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt="">/p> figcaption>Samsung/figcaption> /figure> figure> p>img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt="">/p> figcaption>Samsung/figcaption> /figure> figure> p>img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt="">/p> figcaption>Samsung/figcaption> /figure> figure> p>img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt="">/p> figcaption>Samsung/figcaption> /figure> figure> p>img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt="">/p> figcaption>Samsung/figcaption> /figure> /div>

Источник

Адаптивное выравнивание изображений на всю ширину браузера

Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.

Две картинки по горизонтали

.photos < text-align: center; margin: 0 0 20px 0; overflow: hidden; >.photos a < width: 50%; display: block; float: left; line-height: 0; >.photos img

Три картинки по горизонтали

.photos < text-align: center; margin: 0 0 20px 0; overflow: hidden; >.photos a < width: 33.3%; display: block; float: left; line-height: 0; >.photos img

Четыре картинки

.photos < text-align: center; margin: 0 0 20px 0; overflow: hidden; >.photos a < width: 25%; display: block; float: left; line-height: 0; >.photos img

Для мобильных

Добавим стили, которые выведут фото по вертикали на мобильных с шириной экрана до 800px.

@media screen and (max-width: 800px) < .photos a < width: 100%; float: none; >>

Комментарии 1

Спасибо большое. Мне начинающему сайтостроителю очень помог Ваш материал.Да и в целом очень хороший сайт.

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет.

Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать width=»100%», то он растянется на всю ширину родителя, но для высоты hight=»100%» не работает.

Источник

Как расположить несколько изображений в ряд по ширине экрана?

Как расположить три изображения в один ряд по горизонтали как в макете, чтобы они были по ширине всего экрана, масштабировались при увеличении/уменьшении окна браузера, и при это не обрезались? Только с помощью html/css.
Изначально изображения довольно высокого разрешения.

Три блока по 33.3% шириной. Родителю флекс.
Высота в пропорциях к ширине https://jsfiddle.net/Ankhena/cLhxv7eq/ (в примере квадрат).
Если картинки будут сразу нужных пропорций, то предыдущий пункт лишний.
Если же нет, то еще object-fit.
И не забудьте про адаптивность картинок с помощью тега picture .

Огромное спасибо, флексы помогли. Осталась только одна небольшая проблема — изображение велосипеда справа не прибивается к нижнему краю. background-position: bottom не работает. А если указать для изображение верхний padding в em, при увеличии окна браузера изображение съезжает ниже блока почему-то.

 
  
  
 
vintage Oliva
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
 
 
 

.vintage-byke < height: 100%; >.byke < display: flex; flex-wrap: nowrap; background-color: khaki; height: 30em ; .left-section < width: 60%; >.right-section < width: 40% ; height: 43%; text-align: center; >.byke_subtitle < padding-left: 2em; padding-right: 2em; text-align: center; >.right-fon

Источник

2 картинки по центру

Всем привет.
помогите пж сделать 2 картинки по центру и что бы они стояли чуть ближе.
заранее благодарю.

Выравнивание картинки по центру
Доброе время суток Возникла проблема Вот страница шаблона .

Выравнивание тексте по центру картинки
Добрый день, помогите ставить текст по центру относительно картинки, со сдвигом других картинок.

Выравнивание текса и картинки по центру
Я помню раньше можно было просто выровнять и текс по центу просты алигенем а сейчас я нашел только.

CSS картинка по центру картинки
echo'<div style="position:relative"><img src="/inc/img/logo/’,$_GET,’.png"> <img.

img src="http://s019.***********/i637/1302/09/4a949fee26b7.png" width="100" height="100" hspace="100" vspace="7" align="center"> img src="http://i051.***********/1302/a8/4d3f73bbc73d.png" width="100" height="100" hspace="100" vspace="0" align="center">

ну дак:
hspace=»100″ — это отступы от элемента по горизонтали. уберите их или сделайте минимальными. Сейчас у вас у каждой картинки стоит атрибут «отступ по горизонтали слева и справа от элемента 100 пикселей».

Сообщение от Lovrentiy

у вас чисто html? Используется ли какой нибудь контейнер в который помещаются данные картинки? div? span? Если да, то каков размер? Если автоматический, то они и будет их жать к краю, поставьте тогда ширину во весь экран или фиксированную чтобы центр был по центру, либо в ручную укажите координаты контейнеру.

div class="wrapper"> div class="F">FFF/div> div class="F">AAAAdddddddddddAA/div> /div >

.wrapper{height:100px;background:red;text-align:center;font-size:0;} .F{display:inline-block;font-size:14px; background:green;height:100px;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

 html> head> meta charset=utf-8 /> title>JS Bin/title> /head> body> section class="widget"> ul class="social-icons"> li class="twitter"">">Twitter/a>/li> li class="facebook">a href="">Facebook/a>/li> li class="google-plus">a href="">Google Plus/a>/li> li class="youtube">a href="">Youtube/a>/li> li class="deviant">a href="">Deviant/a>/li> li class="rss">a href="">RSS/a>/li> /ul> /section> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

.widget { width:300px; display:block; margin:0 auto; } ul.social-icons li { width: 32px; float: left; margin: 0 10px 0 0; } ul.social-icons li a { background: transparent url('http://codezona.com/wp-content/themes/xo/images/social_icons.png') no-repeat 0 0; display: block; width: 32px; height: 32px; text-indent: -9999px; } ul.social-icons li a:hover { opacity: 0.8; } ul.social-icons li.facebook a { background-position: -32px 0; } ul.social-icons li.google-plus a { background-position: -64px 0; } ul.social-icons li.youtube a { background-position: -96px 0; } ul.social-icons li.deviant a { background-position: -128px 0; } ul.social-icons li.rss a { background-position: -160px 0; } section.widget ul { font-size: 1.4em; } section.widget ul li { margin-bottom: 10px; }

Посмотреть вживую
второй вариант — сверстать списком с помощью

Источник

Варианты горизонтального выравнивания блоков и картинок по центру справа слева

Часто головной болью начинающих веб-мастеров является корректное выравнивание картинок или блоков по горизонтали и их адаптивное поведение при разных расширениях экрана.

Как выравнять картинку по горизонтали: справа, слева, по центру?

Из указанной ниже информации следует вывод: чтобы выровнять картинку справа, слева, по центру, её необходимо поместить в блок DIV, а затем продолжать работу с этим блоком. Это современный подход к проблеме, когда набрал обороты блочный вид вёрстки контента.

Проблема выравнивания и адаптивности изображения к любому разрешению экрана пропадает сама по себе, когда вы используете фреймворки типа Bootstrap.

В обычной практике используется несколько вариантов выравнивания элементов в один ряд по горизонтали. Наиболее часто используются методы:
— Float;
— Inline-block;
— Table-cell (устаревший после выхода HTML5).

Каждый из них имеет свои недостатки и преимущества. Рассмотрим 2 варианта: Float и Inline-block.

Вариант с использованием Float

Стиль Float используется при блочной вёрстке.
Любой блочный элемент будет размещаться с новой строки не зависимо от присвоенной ему ширины. Даже если уменьшать размер блока div по ширине блоки в один ряд не встанут.

Здесь на помощь придёт Float: left или right.
Он делает блочный элемент плавающим и выравнивает его по левому или правому краю основного блока. Также Float способствует обтеканию элемента текстом.

Для примера, создадим четыре блока, которые нужно разместить в ряд:

.block { float: left; /* обтекание */ line-height: 60px; /* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-top: 60px; margin-right: 10px; >

Получает результат, который вы видите на картинках ниже.

При уменьшении экрана, когда блоки благодаря своему размеру width: 180px; перестанут умещаться в одну линию, они начнут складываться друг под друга.

Как видите блоки (судя по тексту в них) поменяли порядок размещения. Браузер обработал их сверху вниз и выровнял по правому краю, соблюдая очерёдность — сначала выравнял первый, потом второй и т.д. При работе со свойством float: right; имейте это ввиду.

Для прерывания действия свойства обтекания элементов используется конструкция:

В примерах выше расстояния между блоками задаются при помощи отступа margin-right.
Допустим нам необходимо разместить блоки в один ряд по центру и задать отступы между ними.

В этом случае поступаем так:

.content { width: 750px; /* фиксируем ширину родительского блока */ margin: 0 auto; /* центрируем родительский блок */ background: #FFFFCC; height: 60px; /* Высота родителя */ > .block { float: left; /* Задаем обтекание */ line-height: 60px;/* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-right: 10px; > .content :last-child { margin-right: 0px; /* Убираем последнее правое поле* / >

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

Метод «Inline-block»

Как уже говорилось, блочные и строчные элементы имеют свои недостатки и преимущества в зависимости от поставленной задачи. Возьмём только преимущества и попробуем их объединить. Для этого знакомимся со свойством display: inline-block.

Свойство display: inline-block создаёт блочно-строчный элемент, который можно расценивать как строчный, с сохранением блочных свойств. Он позволяет изменять линейные параметры, задавая отступы, поля и т.п.

Свойства блочно-строчного элемента:
— ширина и высота блока определяется автоматически, в зависимости от содержимого и присутствия отступов padding.
— ширину и высоту блока можно задать фиксировано.
— эффект свёртывания границ отсутствует.

Приведу пример простого меню с картинкой и текстовой ссылкой с использованием блочно-строчного элемента.

 
Ссылка меню 1 длиннее обычного
 
 
 
Ссылка меню 2
 
 
 
Ссылка меню 3
 
 
 
Ссылка меню 4
 
 

.content2 { width: 750px; /* фиксируем ширину родительского блока. Если задать 100%, то будут складываться при сужении экрана */ margin: 0 auto; /* центрируем родительский блок */ height: 60px; /* Высота родителя */ > .menu { display: inline-block; /* блочно-строчное отображение */ width: 120px; /* ширина отдельного блока */ vertical-align: top; /* текст меню выравниваем по верху */ > .string a{ text-align: center; /* текст по гориз. центру */ background: #5F4BE3; color: white; text-decoration: none; padding: 3px; >