Justify для любых элементов…

brainiac · April 25, 2010

Всем привет!

Подскажите, как в CSS выровнять что-либо (в частности, изображения) по ширине внутри DIV? Для текста есть text-align: justify, а как быть с остальным? Есть ли аналог? Задача осложняется тем, что пытаюсь сделать эластичную вёрстку, даже не резиновую. И изображения разной ширины.

КАК!?

Edited April 25, 2010 by brainiac

ShumNo · April 25, 2010

Ну так как вариант примените text-align ко всему DIV или непосредственно к нужному элементу (картинке, тексту)

brainiac · April 25, 2010

Ну так как вариант примените text-align ко всему DIV или непосредственно к нужному элементу (картинке, тексту)

Ну так в том то и дело, что такой фокус не проходит. Картинка — это совсем не текст, а свойство так и называется — «text-align».

ShumNo · April 25, 2010

Тогда так:

<div align="center | left | right | justify">...</div>

brainiac · April 25, 2010

Тогда так:

<div align="center | left | right | justify">...</div>

По центру и справа можно, а justify работать отказывается…

Плюс я подключаю файл CSS, там нельзя прописать align: center | right… .

ShumNo · April 25, 2010

Тогда попробуйте для центровки так

<div align="center">...</div>

Написав код смотрю уже писал это... походу идеи закончились Разве все объекты при таком коде не ставит по центру внутри дива?

А если в css, то попробуйте так

.class {
	text-align: center;
}

Edited April 25, 2010 by ShumNo

brainiac · April 25, 2010

А если в css, то попробуйте так
.class {
	text-align: center;
}

По-моему, мы отошли от темы. Как центрировать, я знаю. Мне то нужно Justify (по ширине DIV'a).

Но всё равно спасибо!

ShumNo · April 26, 2010

Не очень понимаю тогда, что же вы хотите в итоге получить?

Есть изображение и его надо выровнять по середине? Или растянуть на весь див? Одно изображение? или там в купе еще что идет?

Скидывайте код с подробным описанием

brainiac · April 26, 2010

Не очень понимаю тогда, что же вы хотите в итоге получить?
Есть изображение и его надо выровнять по середине? Или растянуть на весь див? Одно изображение? или там в купе еще что идет?
Скидывайте код с подробным описанием

Есть DIV. Внутри него несколько изображений. Нужно сделать так, чтобы эти изображения были равноудалены друг от друга. А при изменении размеров окна браузера это расстояние пропорционально менялось.

ShumNo · April 26, 2010

Вот для 3 картинок вариант первую цепляем к левому краю вторую посередине а третью к правому

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>картинки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#kartinki {
   width: 700px;
   border: 1px solid red;
   text-align: center;
}
#img-left {
	float: left;
}
#img-right {
	float: right;
}
</style>
</head>
<body>
	<div id="kartinki">
		<img src="http://путь.png" id="img-left" />
		<img src="http://путь.png" id="img-right" />
		<img src="http://путь.png" />
	</div>
</body>
</html>

А для 4 и более надо подумать

ShumNo · April 26, 2010

Идея одна есть завтра напишу.

Или раньше меня кто может представит красивый код

Verder · April 26, 2010

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

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

Edited April 26, 2010 by Verder

Searcher · April 26, 2010

ShumNo, этим "align="center" вы меня совсем убили. Это ж прошлый век, всё оформление уже давно вынесено в css.

Насчет выравнивания justify для текста пожалуй соглашусь с Verder'ом, а что касается изображений, пунктов меню и прочих блоков с информацией, это бывает вполне полезно.

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

s0rr0w · April 26, 2010

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

Или ограниченность заказчика.

Verder · April 26, 2010

Или ограниченность заказчика.

Это да, но по умолчанию подразумевается, что заказчик ограничен в знаниях в техническом плане, поэтому применение justify в дизайне ложится несмываемым позором именно на дизайнера/редактора сайта.

brainiac · April 26, 2010

В своём первом сообщении я написал «Есть ли что-то подобное». Я не имел ввиду реально использовать justify для картинок, я понимаю, что это свойство текста.

Когда вы предлагаете код для 3х, 4х и т.д. картинок или для блоков с фиксированной шириной и заранее известным отступом между изображениями, это начинает противоречить принципу эластичной вёрстки.

P.S. Там как бы будут сертификаты и лицензии компании. И я не хочу переписывать весть блок, если появится ещё какая-нибудь грамота. Размер (ширина) изображений тоже «ползёт» в зависимости от размеров окна.

Verder · April 26, 2010

В своём первом сообщении я написал «Есть ли что-то подобное». Я не имел ввиду реально использовать justify для картинок, я понимаю, что это свойство текста.
Когда вы предлагаете код для 3х, 4х и т.д. картинок или для блоков с фиксированной шириной и заранее известным отступом между изображениями, это начинает противоречить принципу эластичной вёрстки.
P.S. Там как бы будут сертификаты и лицензии компании. И я не хочу переписывать весть блок, если появится ещё какая-нибудь грамота. Размер (ширина) изображений тоже «ползёт» в зависимости от размеров окна.

Это свойство текста не вызывает претензий только если используется исключительно для вывода на печать.

Если честно, то я не совсем понимаю отличие "эластичной" верстки от резиновой - смысл тот же, элементы должны тянуться.

Вообще-то лично я бы сделал так, чтобы, допустим, когда у тебя разрешение 1280 и больше по горизонтали, то четыре (к примеру) картинки располагаются в ряд по float.

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

mishka · April 26, 2010

картинка на text-align реагирует также как текст.

brainiac, разве незаметил что при text-align:justify; текст выравнивается по краям только если более одной строки, и на последню строку это не действует.

Выше уже привели ссылку на решение задачи http://forum.htmlbook.ru/index.php?showtopic=10823

Edited April 26, 2010 by mishka2

brainiac · April 26, 2010

Выше уже привели ссылку на решение задачи http://forum.htmlbook.ru/index.php?showtopic=10823

Вот спасибо! По описанию — то, что надо. Сейчас буду пробовать.

mishka · April 26, 2010

немного довел до кроссбраузерности

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
	body{margin:0;}
	.over{
		text-align:justify;
		line-height:0;
	}
	* html .over{font-size:0;}
	*+html .over{font-size:0;}
	.sub{
		width:100%;
		display:inline-block;
		vertical-align:top;
	}
	* html .sub{
		display:inline;
		vertical-align:baseline;
	}
	*+html .sub{
		display:inline;
		vertical-align:baseline;
	}
</style>
</head>

<body>
	<div class="over">
		<img src="image.gif" alt="" width="93" height="66" />
		<img src="image.gif" alt="" width="93" height="66" />
		<img src="image.gif" alt="" width="93" height="66" />
		<img src="image.gif" alt="" width="93" height="66" />
		<img src="image.gif" alt="" width="93" height="66" />
		<div class="sub"></div>
	</div>
</body>
</html>

Edited April 26, 2010 by mishka2

Sign In

Justify для любых элементов…

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information