Не могу выровнять содержимое div по центру... ?

byzantiner · 16.10.2010

Не могу выровнять содержимое div по центру... ???

http://www.my-homepage.gmxhome.de/Home-DE.html

Содержимое div#wrapper, то есть div.content-hpt-pictures, должен быть по центру страницы. Как это сделать?
Я пробовал убрать внутренний div и оставить просто таблицу, это ничегo не меняет.
Короче, задача такая - надо наумется любое содержимое любого div размещать по центру!
Спасибо!

Код:

div#wrapper {
                            border: solid 3px green;
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: auto;
	margin: auto;
	padding: 150px 0px 0px 0px;}

div.content-hpt-pictures {
                            border: solid 3px red;
	position: relative;
	width: 800px;
	padding: 0px 0px 0px 0px;
        vertical-align: top;
	text-align: center;
	font-family: georgia;
	font-size: 18px;
	color: #5594CF;
	line-height: 44px;
	z-index: 11;}

table.pictures {
                            border: solid 3px #ffffff;
        height: 100%; 
        width: 100%; 
        vertical-align: top;
        border-collapse: collapse;
	background-image: url(images/bg-table.png);
	z-index: 11;}

motek · 16.10.2010

byzantiner сказал(а):
Не могу выровнять содержимое div по центру... ???

http://www.my-homepage.gmxhome.de/Home-DE.html

Содержимое div#wrapper, то есть div.content-hpt-pictures, должен быть по центру страницы. Как это сделать?
Я пробовал убрать внутренний div и оставить просто таблицу, это ничегo не меняет.
Короче, задача такая - надо наумется любое содержимое любого div размещать по центру!
Спасибо!

Код:

div#wrapper { border: solid 3px green; position: relative; width: 100%; height: 100%; text-align: center; overflow: auto; margin: auto; padding: 150px 0px 0px 0px;} div.content-hpt-pictures { border: solid 3px red; position: relative; width: 800px; padding: 0px 0px 0px 0px; vertical-align: top; text-align: center; font-family: georgia; font-size: 18px; color: #5594CF; line-height: 44px; z-index: 11;} table.pictures { border: solid 3px #ffffff; height: 100%; width: 100%; vertical-align: top; border-collapse: collapse; background-image: url(images/bg-table.png); z-index: 11;}

попробуйте вот так:

Код:

div#wrapper {
        border: solid 3px green;
	width: 800px;
	height: 100%;
	text-align: center;
	overflow: auto;
	margin: 0px auto 0px auto;
	padding: 150px 0px 0px 0px;}

tigra60 · 16.10.2010

http://cssing.org.ua/2007/04/26/another-css-valign-method/
http://cssing.org.ua/examples/valign1/index1.html

byzantiner · 17.10.2010

motek
Извени друг, это ( margin: 0px auto 0px auto; ) не работает.

tigra60 сказал(а):
http://cssing.org.ua/2007/04/26/another-css-valign-method/
http://cssing.org.ua/examples/valign1/index1.html

Уважаемый Тигра, имелось ввиду именно горизонтальное выравнивание. Простите, что не уточнил сразу.

tigra60 · 17.10.2010

"Кто на ком стоял? Потрудитесь выражать свои мысли яснее!"
М. Булгаков, "Собачье сердце"

Насколько я понял (скорее из CSS свойств элементов, чем из Ваших объяснений), таблица должна быть по центру экрана по горизонтали.
Вот код, на основе Вашего (я добавил только margin:auto для внутреннего блока):

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
div#wrapper {
                            border: solid 3px green;
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        overflow: auto;
        margin: auto;
        padding: 150px 0px 0px 0px;
}

div.content-hpt-pictures {
                            border: solid 3px red;
							
margin:auto;	/* я добавил только это */
	
        position: relative;
        width: 800px;
        padding: 0px 0px 0px 0px;
        vertical-align: top;
        text-align: center;
        font-family: georgia;
        font-size: 18px;
        color: #5594CF;
        line-height: 44px;
        z-index: 11;}

table.pictures {
                            border: solid 3px #ffffff;
        height: 100%; 
        width: 100%; 
        vertical-align: top;
        border-collapse: collapse;
        background-image: url(images/bg-table.png);
        z-index: 11;}
</style>		
</head>
<body>
<div id="wrapper">
	<div class="content-hpt-pictures">
		<table class="pictures">
			<tr>
				<td>Картинка 1</td>
				<td>Картинка 2</td>
				<td>Картинка 3</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>

А вот результат его работы:

Вам нужно было такое?

byzantiner · 17.10.2010

tigra60 сказал(а):
Насколько я понял (скорее из CSS свойств элементов, чем из Ваших объяснений), таблица должна быть по центру экрана по горизонтали.
Вот код, на основе Вашего (я добавил только margin:auto для внутреннего блока):

Код:

div.content-hpt-pictures { border: solid 3px red; margin:auto; /* я добавил только это */ position: relative; width: 800px; padding: 0px 0px 0px 0px; vertical-align: top; text-align: center; font-family: georgia; font-size: 18px; color: #5594CF; line-height: 44px; z-index: 11;}

А вот результат его работы:
Посмотреть вложение 1313

Вам нужно было такое?

Спасибо, дорогой Спаситель!!!
Да, именно это было нужно.

motek, извени, пожалуйста, идея была совершенно правильной, я не доехал попробовать применить её к внутреннему div-у.

Не могу выровнять содержимое div по центру... ?

byzantiner

Active Member

motek

злой как @

tigra60

Спасатель

byzantiner

Active Member

tigra60

Спасатель

byzantiner

Active Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей