ГЛАВНАЯ     АРХИВ     НАПИСАТЬ АДМИНУ     ПОДПИСАТЬСЯ НА RSS     ВОЙТИ      

Поиск

Категории

Облако тегов

  << Предыдущий пост       Следующий пост >>  
От: 4aIIaeB
21. февраля 2012 14:12

Недавно я столкнулся с задачей разместить div по центру другого div-а в обоих направлениях. Здесь решение, которое я нашел. Я протестировал его на IE7, FireFox 3 и Chrome 2.

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<
title>Foo foo</title>
<
style type="text/css">
div
{
border:thin gray solid;
}

#parentDiv {
position:relative;
height:500px;
width:100%;
}
#childDiv {
position:absolute;
top:50%;
height:250px;
width: 50%;
margin-top:-125px;
margin-left:250px;

}
</style>
</
head>

<
body>
<
div id="parentDiv">
<
div id="childDiv">Your Text Goes Here</div>
</
div>
</
body>

</
html>
OUTPUT

image



Это перевод. Оригинал здесь.

Похожие записи


Как создать div используя серверный код или JavaScript под ASP.NET ?
Часто нам необходимо создать HTML tag в обработчике запроса на сервере. Или иногда хэто нужно сделать в JavaScript. Дальше будет показан пример кода делающего так. В примере будет создаваться DIV обоими способами. <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Create DIV Dynamically Using JavaScript</title><script type="text...

Как центрировать таблицу внутри дива, используя CSS ?
Если вы ищите простой способ центрировать таблицу внутри дива, то вот он: <html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #divOne { width:400px; text-align:center; border:dotted 1px black; } #tblOne { width:200px; margin:0 auto; ...

Как выровнять несколько div-ов используя класс CSS ?
Очень частый вопрос который задают на форумах, это как выровнять множество div-ов, используя класс CSS. Здесь пример того как это сделать. Для простоты я буду выравнивать 3 div-а. <!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"><hea...

Добавить комментарий




biuquote
  • Комментарий
  • Предпросмотр
Loading


  Сохранить комментарий