Jump to content
  • 0

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

brainiac

Asked by brainiac,

 Share

Question

brainiac Explorer

brainiac

Posted
Posted (edited)

Всем привет!

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

КАК!?

Edited by brainiac
Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
brainiac Explorer

brainiac

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

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

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
Posted (edited)

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

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

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

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

.class {
	text-align: center;
}

Edited by ShumNo
Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
brainiac Explorer

brainiac

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

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

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

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

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
Posted

Вот для 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 и более надо подумать :ph34r:

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

Posted
Posted (edited)

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

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

Edited by Verder
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

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

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

Link to comment
Share on other sites
  • 0
brainiac Explorer

brainiac

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Verder Explorer

Verder

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

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

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

Edited by mishka2
Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

<!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 by mishka2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept