Jump to content
  • 0

Вертикальное выравнивание по центру

vo4tap

Asked by vo4tap,

 Share

Question

vo4tap Explorer

vo4tap

Posted
Posted (edited)

Есть div. в нем картинка. нужно сделать что бы эта картинка была по центру дива в котором она находится.

<!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>
<title>vo4tap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="vo4tap" />

<style type="text/css">
html, body {pading:0; margin:0; background-color:#000000; height:100%;  position:relative; }
img {border:0;}
#all {min-height:100%; text-align:center; background:#f2ddc6;}
</style>
</head>
<body>

<div id="all">
<img src="img/my_avatar.jpg" alt="vo4tap" />
</div>

</body>
</html>

vertical-align:middle; для блока #all не помогает.

нашел два способа по вертикальному выравниванию - то ли руки из опы то ли еще что... но конкретно на моем примере они не работают...

http://habrahabr.ru/blogs/css/73113/

http://habrahabr.ru/blogs/css/71236/

Можете что нибудь посоветовать?

Edited by vo4tap
Link to comment
Share on other sites

25 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Варианты с inline-block и центрированием в строке требуют конкретной высоты этой строки, для 100%-го блока это не пройдет. Здесь, на мое имхо, лучше такой метод применить...

Link to comment
Share on other sites
  • 0
vo4tap Explorer

vo4tap

Posted
  • Author
Posted

display:table-cell;

vertical-align:middle;

не катит... =(

если высота и ширина у блока all задана в процентах то не работает этот способ. если в пикселях(меня это не устраивает) то работает нормально...

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
display:table-cell;

vertical-align:middle;

не катит... =(

если высота и ширина у блока all задана в процентах то не работает этот способ. если в пикселях(меня это не устраивает) то работает нормально...

Держи, братский подгон:

HTML:

<!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=utf-8" />
	<title>test</title>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0; }


		body,html { height: 100%;}

		div {
			display: table;
			vertical-align: middle;
			height: 60%;
			background: red;
			behavior: url('table-cell.htc');
		}

		div div {
			display: table-cell;
			vertical-align: middle;
			height: 100%;
			background: red;
		}



	</style>
</head>

<body>

	<div>
		<div>
			111<br />111<br />111<br />111<br />
		</div>
	</div>

</body>
</html>

htc файлик, создай и засунь в нужную деррикторию, и пропиши на него правильный путь

<public:component>
	<public:attach event="oncontentready" onevent="propertyChanged()" />
	<script language="Javascript">
		function propertyChanged() {
			var s = document.createElement('span');
			s.innerHTML = element.innerHTML;
			element.innerHTML = '';
			element.appendChild(s);

			element.style.display = 'block';

			s.style.display = 'block';
			s.style.position = 'relative';
			s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';

			window.onresize = function() {
				s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';
			}
		}
	</script>
</public:component>

Link to comment
Share on other sites
  • 0
vo4tap Explorer

vo4tap

Posted
  • Author
Posted

то есть содержимое блока, размеры которого указаны в процентах выровнять во вертикали средствами цсс и хтмл(без таблиц) не представляется возможным? О_о

абалдеть.. вроде бы такая простая операция...

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted
то есть содержимое блока, размеры которого указаны в процентах выровнять во вертикали средствами цсс и хтмл(без таблиц) не представляется возможным? О_о

абалдеть.. вроде бы такая простая операция...

А что вы хотели? Прижать блок (футер) к низу - казалось бы, такая простая задачка, однако сколько вопросов по ней возникает у новичков и сколько различных способов ее решения в инете, думаете просто так что ли?

Link to comment
Share on other sites
  • 0
vo4tap Explorer

vo4tap

Posted
  • Author
Posted (edited)

psywalker, но его способ не пашет. сделал по твоему. опера9.64 норм, фф3.5.4 норм. ИЕ6.0 даже с хаком - косяк =(

http://my.vo4tap.info/ =(

всем большое спасибо, псивалкеру отдельное =)

но если кто поможет поправить ИЕ было бы совсем прекрасно.

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

mishka

Posted
Posted 
<!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>
	<title>Вертикальное центрирование элемента неизвестной высоты</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	html,body{
		height:100%;
	}
	body{
		margin:0;
		background:#ccc;
	}
	#wrapper{
		width:100%;
		height:100%;
		margin:0 auto;
		display:table;
	}
	#mc-1{
		display:table-cell;
		vertical-align:middle;
	}
	#mc-2{
		width:400px;
		overflow:hidden;
		margin:0 auto;
		padding:10px;
		border:1px solid #060;
		background:#fc0;
	}
	* html #mc-2{
		margin-top:expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) <0 ? "0" :(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) +'px');
	}
	*+html #mc-2{
		margin-top:expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) <0 ? "0" :(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) +'px');
	}
	-->
	</style>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div id="mc-1">
		<div id="mc-2">
			<div id="mc-3">
				<h1>Вертикальное центрирование</h1>
				<p>Вертикальное центрирование элемента неизвестной высоты относительно окна браузера</p>
			</div>
		</div>
	</div>
</div>
<!-- end wrapper -->
</body>
</html>

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

Медведь, я круче: :lol:

<!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=utf-8" />
	<title>test</title>

	<style type="text/css">
		* { margin: 0;padding: 0; }
		body,html { height: 100%;}

		div#viravnivanie_out{
			display: table;
			_display: table-cell;
			vertical-align: middle;
			height: 100%;
		}

		div#all{
			display: table-cell;
			vertical-align: middle;
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}



	</style>
</head>

<body>

	<div  id="viravnivanie_out">
		<div id="all"><img src="my_avatar.jpg" width="338" height="336" /> </div>
	</div>

</body>
</html>

Без скрипта и один экспрешн!

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

mishka

Posted
Posted (edited)

ТС

А кто будет ставить блоку all высоту авто для всех и 100% дли ие6?

Без скрипта и один экспрешн!

А у меня есть скриппт? И експрешенов разве сколько у меня??

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

Ну а насчет того что ты круче - я и неспорю :lol:

_display: table-cell;

Это лишнее потому что ие6-7 какраз таки table-cell и непонимают. А table понимают

vertical-align: middle; можна указать только один раз, тому блоку которому указываешь display: table-cell;

Итог:

<!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=utf-8" />
	<title>test</title>

	<style type="text/css">
		* { margin: 0;padding: 0; }
		body,html { height: 100%;}
		#viravnivanie_out{
			display: table;
			height: 100%;
		}
		#all{
			display: table-cell;
			vertical-align: middle;
		}
		* html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
		*+html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
	</style>
</head>
<body>
	<div id="viravnivanie_out">
		<div id="all">
			<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur condimentum Curabitur mauris. Commodo Aenean tellus consequat eu Vivamus Aliquam semper senectus scelerisque et. Nibh a.</p>
			<p>Accumsan Nunc ipsum nonummy Aenean Pellentesque Donec est Pellentesque adipiscing sem. Augue vitae porttitor vel Curabitur ridiculus Sed semper risus libero neque. Congue.</p>
		</div>
	</div>

</body>
</html>

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

mishka

Posted
Posted (edited)
тут смотрели?

Этот способ не совсем хорош так как используется абсолют.

Один раз друг обратился за помощью - немог понять почему попапы в ие6 падают под список(был список в котором он использовал вертикальное центрирование с абсолютами). И попапы были расположенны в хтмл тоже внутри этих списков. А так как в ие6 никаким z-index елемент выше родителя не поднимешь(если у него тоже есть релейтив)(вернее выше соседа родителя находящегося ниже по хтмл... накрутил вобщем :lol: ) то вот такой баг у него получился.

И у вашего способа высота центрируемого блока фиксированна.

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

vo4tap

Posted
  • Author
Posted (edited)

псивалкер, а как же братский подгон из пятого поста ( http://forum.htmlbook.ru/index.php?showtop...st&p=121424 ) ???

почему ты предложил новую версию, а не подделал старую?:lol: я без претензий - просто не понятно.... зачем делать заново если можно доделать то что уже сотворил?

> http://www.wpdfd.com/editorial/thebox/deadcentre4.html

это конечно выход но он не оч хороший, так как: 1) нужно знать рамер высоты блока 2) это выравнивание блока, а не его содержимого....

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

psywalker

Posted
Posted

vo4tap

псивалкер, а как же братский подгон из пятого поста ( http://forum.htmlbook.ru/index.php?showtop...st&p=121424 ) ???

почему ты предложил новую версию, а не подделал старую?smile.gif я без претензий - просто не понятно.... зачем делать заново если можно доделать то что уже сотворил?

А братский подгон оказался не пригодным к идентификаторам почему-то, надо будет разбираться ещё с этим вопросом :lol:

> http://www.wpdfd.com/editorial/thebox/deadcentre4.html

это конечно выход но он не оч хороший, так как: 1) нужно знать рамер высоты блока 2) это выравнивание блока, а не его содержимого....

1) Ну тут уже походу ничё не попишешь

2) Ну сделай внутренний блок содержимым

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted
До моего уровня ты уже дорос, а до уровня Медведяя тебее ещё ого-гооо сколькоо

1. Прекращай меня пиарить.

2. У тебя явно заниженна самооценка. Мои знания явно не больше твоих. :lol:

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
1. Прекращай меня пиарить.

2. У тебя явно заниженна самооценка. Мои знания явно не больше твоих. :lol:

ладно, я знаю, что говорю, пойду лучше дальше книжку читать B)

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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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