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

woofs · January 30, 2009

Добрый день, вновь.

Подскажите как мне содержимое контейнера выровнять по вертикаль-центр(vertical-align почемуто не помогает), у контейнера минимальная высота, в него помещается еще один контейнер....

#title_conn {width:100%; /*он долженн выставить чтобы содержимое равнялось по вертикал-центр*/
background-color:#eeeeee;
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
min-height:30px;
}

.tit { /*он должен встать по центру вертикали*/
position:relative;
width:158px;
left: 16px;
padding:2px;
border: 1px solid red;
}


<div id="right">
<div id="title_conn">
<div class="tit"><p>jjjjj</p>
</div>
</div>
</div>

Victor Ananiev · January 30, 2009

для родителя display:table-cell; vertical-align:middle; а для ИЕ6 expressions)

woofs · January 30, 2009

а можно на коде продемонстрировать а то я чуть запутался((( так попробовал но у меня каша получается я чет не туда ставлю

s0rr0w · January 30, 2009

а можно на коде продемонстрировать а то я чуть запутался((( так попробовал но у меня каша получается я чет не туда ставлю

Открываете гугль (тыц),

вводите поисковый запрос что-то около такого "выравнивание контента по вертикали display table-cell",

внимательно изучаете матчасть,

и радуетесь полученному результату.

woofs · January 30, 2009

спасибо, вооюще разленился,про google, забыл хд))

woofs · January 30, 2009

А нет!! проблемма образовалась в разных браузерах. точнее в ие 7, а в ие 6 все норм

блок в котором текст вылезает из за того что стоит min-height:30px; height:30px;, а если убрать min-height:30px; то короткий текст всеми кроме ие, отображается ширина блока как ширина текста, как с эитм бороться

вот

    <div id="right"><div id="title_conn"><div class="img_tit"></div><div id="tit"><p>привет, длинный очень, очень, в 3 строки, в три три три строки</p></div>
</div>

и

    <div id="right"><div id="title_conn"><div class="img_tit"></div><div id="tit"><p>привет, длинный очень, очень, в 3 строки, в три три три строки</p></div>
    </div>

и css

#title_conn {
width:750px; 
background-color:#eeeeee;
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
min-height:30px;
height:30px;
display: table-cell;
vertical-align: middle;

}

#tit { 
position:relative;
left:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
width:158px;
position:relative;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}

Edited January 30, 2009 by woofs

Victor Ananiev · January 30, 2009

можна по подробнее? ничего не понял...) может width:100%?

woofs · January 30, 2009

в ие 7 не расширяется крнтейнер я так думаю из за записи

min-height:30px;

height:30px;

если убрать height:30px; то в ие 7 все нормально а везде всё ломается, короче как можно написать хак для ие 7 а точнее для этого

чтоб везде было


 .......
#title_conn {
width:750px; /*он долженн выставить чтобы содержимое равнялось по вертикал-центр*/
background-color:#eeeeee;
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
[color="#FF0000"][size=3]min-height:30px;
height:30px;[/size][/color]
display: table-cell;
vertical-align: middle;
}
........

а в ие 7


 .......
#title_conn {
width:750px; /*он долженн выставить чтобы содержимое равнялось по вертикал-центр*/
background-color:#eeeeee;
position:relative;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
[color="#FF0000"][size=3]min-height:30px;[/size][/color]

display: table-cell;
vertical-align: middle;
}
........

s0rr0w · January 30, 2009

если убрать height:30px; то в ие 7 все нормально а везде всё ломается, короче как можно написать хак для ие 7 а точнее для этого

Тыц

woofs · January 30, 2009

блин ну дайте по конкретнее а лучше подпишите я уже обыскался но не могу найти как он клеется и подменяется, там одни колекции хаков

вот я в хеад помещу

а мне в css весь код писать или только часть?

и надоли чтото в css помечать...?

всё вроде получилось, спасибо за возьню)

хак написал, по другому вроде не получается

не не не что опять не так

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<!--[if IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />


</head>

а он всеравно это свойвство берет из основного

Edited January 30, 2009 by woofs

Victor Ananiev · January 30, 2009

потому что вначале подгружается хак а потом основной, а должно быть наоборот)) и не кричите плз)))

ote4ek · February 1, 2009

Добрый вечер!

Подскажите,как решить проблемку,я в этом деле ещё новичок,проблема следующая:

как выровнять по вертикали содержимое внутри слоя,в данном случае там находится модуль для joomla,юзал line-height,в IE отображается норм(скрин 1),а в опере мол никакого выравнивания и не было(скрин 2)

Хелп!

Vlad · February 2, 2009

Без кода конкретно сложно что-то сказать.

ote4ek · February 2, 2009

Без кода конкретно сложно что-то сказать.

<body>
<div id="logo"></div>
<div id="header"></div>
<div id="p">
  <?php if($this->countModules('user1')) : ?>
  <jdoc:include type="modules" name="user1" style="none" />
  <?php endif; ?>
</div>
<div id="clear"></div>
<div id="menu1">
   <?php if($this->countModules('left')) : ?>
  <jdoc:include type="modules" name="left" style="xhtml" />
  <?php endif; ?>
</div>
<div align="center" id="content">
  <jdoc:include type="component" />
</div>
</body>

body,html {
	padding		  : 0;
	margin		   : 0;
  }
#logo {
	float: left;
	width: 250px;
	height: 150px;
	background:url(../images/logo.gif);

}
#header {
	background:url(../images/header.gif);
	height: 150px;
	margin-left: 250px;
}
#p {
	width: 100%;
	background:url(../images/pod.gif);
	height: 40px;
	line-height: 35px;


}
#menu1{
	width: 200px; /* Ширина меню */
	background: #d5e5fd; /* Цвет фона */
	border: solid 1px black; /* Параметры рамки */
	float: left; /* Состыковка с другим слоем по горизонтали */
	padding: 3px; /* Поля вокруг текста */

}
#content { /* Основное содержание страницы */
	background: #d7dfe8; /* Цвет фона */
	border: solid 1px black; /* Параметры рамки */
	margin-left: 210px; /* Отступ слева */

 }
#clear {
	clear: both;
		height: 10px;
}

Если найдёте много замечаний,не кричите,я только учусь и это первый мой опыт создания шаблона

Edited February 2, 2009 by ote4ek

Vlad · February 2, 2009

Под "кодом" подразумевался HTML-код, с ним же проблемы в браузере. А лучше дай ссылку на ресурс с проблемой.

ote4ek · February 2, 2009

<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="{LANG_TAG}" lang="{LANG_TAG}" dir="{LANG_DIR}" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Главная страница</title>
  <link href="/project/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/project/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/project/templates/bizcity_ii/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <script type="text/javascript" src="/project/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/project/media/system/js/caption.js"></script>


<link rel="stylesheet" href="/project/templates/test/css/template.css" type="text/css" />
</head>



<body>
<div id="logo"></div>
<div id="header"></div>
<div id="p">
	<form action="index.php" method="post">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Поиск" class="inputbox" type="text" size="20" value="поиск..."  onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';" /><input type="submit" value="Поиск" class="button" onclick="this.form.searchword.focus();"/>	</div>
	<input type="hidden" name="task"   value="search" />
	<input type="hidden" name="option" value="com_search" />
</form>
  </div>
<div id="clear"></div>
<div id="menu1">
	 		<div class="moduletable_menu">
					<h3>Навигация</h3>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><a href="/project/index.php?option=com_content&view=frontpage&Itemid=1" class="mainlevel" id="active_menu">Главная</a></td></tr>
</table>		</div>
			<div class="moduletable">
					<h3>Вход на сайт</h3>
					<form action="/project/index.php" method="post" name="login" id="form-login" >
		<fieldset class="input">
	<p id="form-login-username">
		<label for="modlgn_username">Логин</label><br />
		<input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" />
	</p>
	<p id="form-login-password">
		<label for="modlgn_passwd">Пароль</label><br />
		<input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" />
	</p>
		<p id="form-login-remember">
		<label for="modlgn_remember">Запомнить меня</label>
		<input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" />
	</p>
		<input type="submit" name="Submit" class="button" value="Войти" />
	</fieldset>
	<ul>
		<li>
			<a href="/project/index.php?option=com_user&view=reset">
			Забыли пароль?</a>
		</li>
		<li>
			<a href="/project/index.php?option=com_user&view=remind">
			Забыли логин?</a>
		</li>
				<li>
			<a href="/project/index.php?option=com_user&task=register">
				Регистрация</a>
		</li>
			</ul>

	<input type="hidden" name="option" value="com_user" />
	<input type="hidden" name="task" value="login" />
	<input type="hidden" name="return" value="L3Byb2plY3Q=" />
	<input type="hidden" name="8794e96e507610748990afe1940ba732" value="1" /></form>
		</div>

  </div>
<div align="center" id="content">
  <div class="componentheading">
	Главная страница</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
				</td>
</tr>


</table>

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

нету ещё никакого ресурса,я только учусь,ресурс этот создаю локально,точнее пробую создать

Edited February 2, 2009 by ote4ek

ote4ek · February 2, 2009

разобрался,надо было вообще margin юзать,удалите предыдщие мои посты,ибо в них бред=))

Sign In

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

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information