LINUX.ORG.RU
решено Форум — Web-development  

выравнивание по вертикали внутри дива

 ,


0

2

как сделать в такой верстке 

<!DOCTYPE html>
<html>
<head>
<style>
#d1{width:100px;height:100px;background:#0f0;float:left;}
#d2{background:#f00;margin:0 auto;width:20px;height:20px;}
</style>
</head>
<body>
<a id="a1" href=""><div id="d1"><div id="d2">test</div></div></a>test test test
</body>
</html>

сразу скажу, что display:table-cell; vertical-align:middle; не работает.

★★★★★
← как получить путь к ror проекту?
Batman.js кто нибудь юзал? →

естественно оно не будет работать! таблицей надо использовать, а не ячейкой дисплеить блок. хотя, html5 может как-то иначе относиться к таким фокусам.

funeralismatic ★★★
()

и, да: если размеры обоих блоков фиксированны, то почему бы не обыграть это паддингами/маргинами?

funeralismatic ★★★
()

Задавай жестко размеры и display: inline; Или я не понял что ты хочешь.

mopsene ★★★
()
Ответ на: комментарий от funeralismatic

да я случайно осталив width и height для внутреннего дива, размеры жестко указаны только у #d1.

TDrive ★★★★★
() автор топика 
<a id="a1" href=""><div

Закопать.

<!DOCTYPE html>
<html>
<head>
<style>
.d1{
	background: #0f0;
	display: table-cell;
	height: 100px;
	vertical-align: middle;
	width: 100px;
}
.d2{
	background: #f00;
	display: block;
	margin: 0 auto;
	width: 20px;
	height: 20px;
}
</style>
</head>
<body>
<div>
	<a class="a1" href="">
		<span class="d1">
			<span class="d2">test</span>
		</span>
	</a>test test test
</div>
</body>
</html>
Deleted
()

Что именно выровнять то надо? line-heihgt, либо отступы.

А вообще, ты вталкиваешь блочный элемент в строчный, так делать нельзя.

Kalashnikov ★★★
()
Ответ на: комментарий от Deleted

В твоем варианте test test test тоже по центру выравнивается, а следующая строка начинается под #d1, Если поставить для #d1 float:left; получается точно также как и в моем варианте.

Закопать.

А какая разница использовать строчный элемент с display: block; или сразу блочный элемент? У тебя в результате то же самое что и у меня получилось, просто ты float:left; не поставил.

TDrive ★★★★★
() автор топика
Ответ на: комментарий от Kalashnikov

внутренний див нужно выравнить, его высота может меняться, я немного не правильно указал в первом посте.Причем выравнивание не должно влиять на текст с права который обтекает див. С line-heihgt у меня не получилось добиться нужного результата.

TDrive ★★★★★
() автор топика
Ответ на: комментарий от TDrive

>В твоем варианте test test test тоже по центру выравнивается

А где она должна быть? Ты про это ничего не сказал. Пиши таблицу, если хочешь что-то непонятное. Или сделай ещё одну «ячейку» и выровняй так, как хочешь.

>А какая разница использовать строчный элемент с display: block; или сразу блочный элемент?

CSS влияет только на отображение. С точки зрения HTML ничего не меняется — пихать блоки в строки нехорошою

Deleted
()
Ответ на: комментарий от Deleted

>Обтекает

Ну, поставь флоат на .a1, делов то.

Deleted
() 
<!DOCTYPE html>
<html>
  <head>
    <style>
      #a1{display: inline-block; vertical-align: top}
      #d1{
        width:100px;
        height:100px;
        line-height: 100px;
        text-align: center;
        background:#0f0;
      }
      #d2{
        width:20px;
        height:20px;
        line-height: 20px;
        vertical-align: middle;
        display: inline-block;
        background:#f00;
      }
    </style>
  </head>
  <body>
    <a id=a1 href=#>

      <div id=d1>
        <div id=d2>test</div>
      </div>

    </a>

    test test test

  </body>
</html>
special-k ★★★★
()

С table-cell тоже работает. 

<!DOCTYPE html>
<html>
  <head>
    <style>
      #a1{display: inline-block; vertical-align: top}
      #d1{
        width:100px;
        height:100px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        background:#0f0;
      }
      #d2{
        width:20px;
        height:20px;
        display: inline-block;
        background: #f00;
      }
    </style>
  </head>
  <body>
    <a id=a1 href=#>

      <div id=d1>
        <div id=d2>test</div>
      </div>

    </a>

    test test test

  </body>
</html>

special-k ★★★★
()
Ответ на: комментарий от Deleted

пихать блоки в строки нехорошою

Тем не менее, у тебя внутри строки(<a) - блок (<span который ведет себя как блок) -_-.

special-k ★★★★
()
Ответ на: комментарий от Kalashnikov

А вообще, ты вталкиваешь блочный элемент в строчный, так делать нельзя.

В html5 разрешили вкладывать div в a.

anonymous
()
Ответ на: комментарий от Deleted

Валидность это конечно хорошо, коль скоро ты графоман. Но элементы дом дерева это в первую очередь объекты, часть свойств (касаемо отображения) которых приходит из css. Так вот в тех примерах, что я указал, я знаю размер блока <a , а ты не знаешь.

special-k ★★★★
()
Ответ на: комментарий от special-k

Так не посещай, раз видишь его везде, даже там, где его нет :}

Deleted
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← как получить путь к ror проекту?
Web-development
Batman.js кто нибудь юзал? →