Форум PHP программистов > элемент без определенной ширины по центру

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: элемент без определенной ширины по центру

Гость_Alex

11.05.2012 - 16:09

как расположить элемент по центру клиентской части браузера и по вертикали и по горизонтали, если его ширина может быть любой?

Спустя 2 минуты, 15 секунд (11.05.2012 - 16:12) TranceIT написал(а):

Попробуйте margin: 0 auto;
Или на js

Спустя 6 минут (11.05.2012 - 16:18) Guest написал(а):

"Попробуйте margin: 0 auto; "

при таком варианте по вертикали никак не получается.
Нужно без js

Спустя 2 минуты, 24 секунды (11.05.2012 - 16:20) redreem написал(а):

что значит "любой"? если auto, то "никак", если задано какое-то значение, то margin:0 auto сработает

Спустя 3 минуты, 26 секунд (11.05.2012 - 16:23) Guest написал(а):

redreem
Дело в том, что нужно чтобы элемент был прям в центре окна. И по горизонтали и по вертикали. Ширина зависит от текста внутри этого элемента. Кроме этого элемента ничего нет больше.

Спустя 1 минута, 59 секунд (11.05.2012 - 16:25) TranceIT написал(а):

На js вычисляйте ширину и высоту элемента и задавайте позицию.

Спустя 33 секунды (11.05.2012 - 16:26) Guest написал(а):

TranceIT
без js не возможно?

Спустя 18 секунд (11.05.2012 - 16:26) redreem написал(а):

а высота от чего зависит?

Спустя 4 минуты, 26 секунд (11.05.2012 - 16:31) Guest написал(а):

redreem
высота определенная, 70px
.center { position:absolute; top:50%; margin-top:-35px; }

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

.center { margin:0 auto }

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

А вместе не пойму как сделать =)

Спустя 2 минуты, 20 секунд (11.05.2012 - 16:33) Renden написал(а):

Какой js вы о чем? 1 строка стиля:


.block {width:400px;height:200px;position:absolute;left:50%;top:50%;margin-top:-100px;margin-left:-200px;background:grey;}

UPD А блин сорри.. ширина любая не заметил...
Guest
Чтоб выравнивать блок по горизонтали нужно знать его ширину, хотябы в процентах, например выстави ему 30% ширины... а иначе никак браузер не поймет как ему отпозиционировать блок.

Спустя 19 минут, 25 секунд (11.05.2012 - 16:52) redreem написал(а):

<!DOCTYPE HTML>
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>тест</title>
	<script type="text/javascript" src="/js/jquery162.js"></script>

	
	<style type="text/css">
		html, body {width:100%;height:100%}
		* {margin:0;padding:0}
		
		.wrap{position:relative;width:100%;height:100%;background:#afa;text-align:center;}
		.centerBlock {position:relative;display:inline-block;background:#faa;height:50px;font-size:20px;padding:20px 20px 0 20px;line-height:20px;margin-top:-35px;top:50%}
		
		
	</style>
	
</head>


<body>

<div class="wrap">
	
	<span class="centerBlock">
		
		dkjgdjfg hjgkl jhsdfjkgh sdjklhg jkldfhg
		
	</span>

</div>
	
	
</body>
</html>

Спустя 6 минут, 13 секунд (11.05.2012 - 16:59) sebastjan написал(а):

Изучай.


<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <style type="text/css">
                * {
                        margin: 0;
                        padding: 0;
                        font: 12px Tahoma, Arial, sans-serif;
                }
                
                html, body {
                        height: 100%;
                }
                
                .parent {
                        width:  70%;
                        height: 70%;
                        margin: 0 auto;
                        text-align: center;
                        border: red 1px dotted;
                }
                
                .child,
                .helper {
                        display: -moz-inline-block;
                        display: inline-block;
                        vertical-align: middle;
                }
                
                .child {
                        width: 50%;
                }
                
                .helper {
                        width: 0;
                        height: 100%;
                }
        </style>
        
        <!--[if lte IE 7]>
        <style type="text/css">
                .child,
                .helper {
                        zoom: 1;
                        display: inline;
                }
        </style>
        <![endif]-->
</head>

<body>
        <div class="parent">
                <div class="child">
длинный предлинный текст, который обязательно перенесется на другую строку если ты, уважаемый юзер, соизволишь уменьшить размер окна. Но я все равно останусь по середине!xxx xxx xxxxx xxxx xxx xxxxxx xxxx xxxx
                </div>
                <div class="helper"></div>
        </div>
        
</body>
</html>

Спустя 5 часов, 54 минуты, 29 секунд (11.05.2012 - 22:53) Guest написал(а):

sebastjan
спасибо! разберусь =)

Быстрый ответ:

Здесь расположена полная версия этой страницы.