Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация

Ответ Создать новую тему
 
02.11.2009, 19:43   #1
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
Расположение по центру в теге div / HTML, CSS

Доброго времени суток!!!
Как установить все элементы в центр по вертикали и горизонтали, внутри тега div.

Пытался сделать так(в css):
Код Code
1
2
3
4
5
.div
{
   vertical-align: center;
   text-align: center;
}
Но элементы центруются только по горизонтали.
Заранее спасибо!!!
02.11.2009, 19:43
AdAgent
Объявления
02.11.2009, 19:51   #2
FunDuck
Форумчанин
682 / 374 / 3
Регистрация: 22.01.2009
Сообщений: 1,135
Расположение по центру в теге div

У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".
Другие темы раздела
не могу ни как исправить одну деталь в шаблоне! (блоки) HTML, CSS
http://s59.***********/i164/0911/6b/186107b40468t.jpg скачать шаблон или код ниже: <html> <head> <title>Untitled Document</title>
Как исправить ошибку ? HTML, CSS
Сматрите рисунак, никак немагу попасть на свой сайт.
02.11.2009, 21:28  [ТС]   #3
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
Расположение по центру в теге div

vertical-align: middle - помог, но только в Google Chrome, в IE8 ни в какую... line-height - тоже не помог.
Вот полностью код css:
Код Code
1
2
3
4
5
6
7
8
9
10
11
.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    
}
03.11.2009, 11:19   #4
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
Расположение по центру в теге div

Если нельзя напрямую, попробуем наискось...

Можно так:
Код HTML5
1
2
3
4
<div style="background:#ccc; width:100%; height:111px;">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle">
Текст в центре
</td></tr></table></div>
Или так:
Код HTML5
1
2
3
4
<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>
Или так:
Код HTML5
1
2
3
4
5
6
7
8
<div style="background:#ccc; width:100%; height:111px; text-align:center;" id="heigh">
<div id="paddin" style="padding:0;">
Текст в центре
</div></div>
<script type="text/javascript"><!--
document.getElementById("paddin").style.paddingTop=
Math.round(parseInt(document.getElementById("heigh").style.height)/2)-10+"px";
--></script>
03.11.2009, 20:03   #5
Vanstorm
Форумчанин
2769 / 334 / 4
Регистрация: 15.01.2008
Сообщений: 2,674
Расположение по центру в теге div

Ну не знаю вот это
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    border:1px solid;
    
}
</style>
<div class="border">ihk</div>
У меня работает на 3 браузерах. почему?
Миниатюры
Расположение по центру в теге div  
03.11.2009, 21:54   #6
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
Расположение по центру в теге div

Цитата Сообщение от Vanstorm Посмотреть сообщение
У меня работает на 3 браузерах. почему?
Не знаю, мои версии работают в пяти.
03.11.2009, 22:02   #7
Vanstorm
Форумчанин
2769 / 334 / 4
Регистрация: 15.01.2008
Сообщений: 2,674
Расположение по центру в теге div

BlackApricot,
на других я просто не проверял
это я к тому что вариант предложенный автором не так уж и плох.
04.11.2009, 12:11  [ТС]   #8
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
Расположение по центру в теге div

Цитата Сообщение от Vanstorm Посмотреть сообщение
Ну не знаю вот это
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    border:1px solid;
    
}
</style>
<div class="border">ihk</div>
У меня работает на 3 браузерах. почему?
У меня работает на Google Chrome Mozilla, а на IE нет...

Добавлено через 2 минуты
Цитата Сообщение от BlackApricot Посмотреть сообщение
Если нельзя напрямую, попробуем наискось...

Можно так:
Код HTML5
1
2
3
4
<div style="background:#ccc; width:100%; height:111px;">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle">
Текст в центре
</td></tr></table></div>
Или так:
Код HTML5
1
2
3
4
<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>
Или так:
Код HTML5
1
2
3
4
5
6
7
8
<div style="background:#ccc; width:100%; height:111px; text-align:center;" id="heigh">
<div id="paddin" style="padding:0;">
Текст в центре
</div></div>
<script type="text/javascript"><!--
document.getElementById("paddin").style.paddingTop=
Math.round(parseInt(document.getElementById("heigh").style.height)/2)-10+"px";
--></script>
Спасибо,но немного громоздко!
04.11.2009, 16:22   #9
romchiksoad
Модератор
1913 / 758 / 29
Регистрация: 03.11.2009
Сообщений: 2,917
Записей в блоге: 2
Расположение по центру в теге div

Код HTML5
1
div{text-align:center}
04.11.2009, 18:27  [ТС]   #10
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
Расположение по центру в теге div / HTML, CSS

Цитата Сообщение от romchiksoad Посмотреть сообщение
Код HTML5
1
div{text-align:center}
Это просто центровка по горизонтали.
04.11.2009, 18:27
Yandex
Объявления
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Автор Дата
HTML, CSS Как в теге li с высотой в 35px сделать ссылку с текстом по центру?
Как в теге li с высотой в 35px сделать ссылку с текстом по вертикали слева по середине или же снизу? <ul> <li class="css"><a href="#">Текст</a></li> </ul> .css{
HTML, CSS devid134 04.05.2014 01:29
HTML, CSS Расположение блоков по всему блоку по центру
Здравствуйте. у меня возникла проблема. мне нужно расположить блоки по центру, так, чтобы они имели отступы друг от друга, при этом нужно сделать, чтобы отступы подстраивались под разрешение экрана. я взял скрипт masorny, который делает их плавающими, но нужно их по центру расположить. помогите...
HTML, CSS pascal_user 16.03.2014 18:34
HTML, CSS Как наложить один DIV на другой DIV (чтобы он был по центру)
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу). И так приступили, создаю <div> но создается либо выше либо ниже другого <Div> мне надо чтобы он был. точне чтобы он лежал сразу на двух дивах. И чтобы не с краю и не вцентре а чуть правее центра...
HTML, CSS brahmanchikkk 26.12.2013 18:08
HTML, CSS Расположение блока по центру по вертикали для IE
#content { display: block; margin: 0 auto; height: 100%; width: 800px; } В IE не по центру располагается.
HTML, CSS Alex9 22.09.2013 17:31
HTML, CSS Расположение картинки по центру
Я новичок в этом деле. Прошу помочь разобраться,если не сложно написать код,который расположил бы картинку по центру горизонтально и вертикально,не зависимо от размера окна браузера.Заранее благодарю:)
HTML, CSS Мурат777 06.09.2013 15:09
HTML, CSS Расположение активных кнопок меню по центру
Не получается расположить две активные картинки по центру и чтобы они обе работали как гиперссылка. Код html <!DOCTYPE html> <html> <head> <meta content="text/html" charset="utf=8"> <title>Поселок</title> <link rel="stylesheet" media="screen" type="text/css" title="Style"...
HTML, CSS Chris 19.01.2012 23:14
C++ Builder расположение элементов формы по центру (не зависимо от диагонали экрана)
при запуске форма раскрывается на весь экран (WindowState->wsMaximized), а элементы скромно остаются на своих местах в сторонке. как их оживить?) может сделать групбох и все туда содержимое поместить?
C++ Builder for_sunny 09.11.2011 23:22
JavaScript расположение содержимого сайта по центру
как расположить содержимое по центру: ...<div id="wrap"> <div id="header"><h1>Page 1</h1></div> <div id="menu"> <hr> <a href="index.html">Home page</a> | <a href="Page1.html"><b>Page 1</b></a> | <a href="Page2.html">Page 2</a> | <a href="Sitemap.html">Sitemap</a> | <a...
JavaScript outoftime 20.08.2009 13:04
Опции темы

Текущее время: 05:33. Часовой пояс GMT +4.

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.