Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.05.2015, 19:47   #1
macdack
Пользователь
 
Регистрация: 16.03.2010
Сообщений: 16
По умолчанию display: flex для элемента body

вот так пытаюсь с помошью флексбокса отцентрировать элемент в теле документа:

не получается:


Код HTML:
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>html6</title>


<style type="text/css" id="">

body 
   {
   display:flex; 
   justify-content:center;
   align-items:center;  
   background: black;
   }

#div
   {
   width:200px;
   height:200px;
   background:silver;

   }


</style>
</head>
<body>



<div id="div"></div>



</body>
</html>
как отцентрировать один элемент в теле документа ?
то есть какое бы ни был размером элемент body - вложеный элемент центрируется
macdack вне форума Ответить с цитированием
Старый 15.05.2015, 15:27   #2
Wicort
Форумчанин
 
Аватар для Wicort
 
Регистрация: 04.08.2009
Сообщений: 684
По умолчанию

Вы имеете ввиду то, что у Вас не по центру экрана в данном случае? Если да, то по-умолчанию body имеет высоту, равную суммарной высоте контента (грубо говоря). В Вашем случае - высоту серого квадрата - 200px. Body - тоже.
Попробуйте дополнительно прописать
Код HTML:
html 
   {
   height:100%;
   }
и, соответственно, в body тоже добавить высоту
Код HTML:
body 
   {
   display:flex; 
   justify-content:center;
   align-items:center;  
   background: black;
   height: 100%;
   }
Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?
Wicort вне форума Ответить с цитированием
Старый 15.05.2015, 23:04   #3
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

что то как то мутно... ну все же наугад отвечу... margin: 0 auto;
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 16.05.2015, 11:29   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Stanislav Посмотреть сообщение
что то как то мутно... ну все же наугад отвечу... margin: 0 auto;
тут то это причем? По горизонтали он уже отцентровал флексом. Для центровки по вертикали не хватало высоты окна, что и подсказал Wicort.
Автоматический марджин — абсолютно другой метод центровки и только по горизонтали.
upd: Хотя вру, есть вариант центровки с абсолютным позиционированием и автоматическим марджином для заданных размеров блока.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
переписать код с++ для flex laovai Помощь студентам 0 13.03.2015 09:41
background для body не заливает всю страницу, только видумую область dem66 HTML и CSS 2 21.07.2013 12:46
Конструктор,метод вывода на экран Display, метод для преобразования в строку toString в Delphi Чумак Татьяна Помощь студентам 6 03.04.2012 11:58
hex->display (для загрузчика) Lord_Rey Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 0 23.12.2010 22:39
Два background'а для body (слева и справа от контента)? alex2406 HTML и CSS 7 14.06.2010 16:34