Пятница, 22 Марта 2013 15:05

Position absolute по центру

Written by 
Оцени эту запись
(3 Голоса)

В последнее время на сайтах часто используют позиционирование элементов. И часто абсолютное позиционирование используется для создания всплывающих окошек - реклама, формы регистрации и авторизации, всплывающие окна с картинками (lightbox) и т.д. Такие окошки нужно выставлять по центру экрана. В этой статье я покажу простой пример, как выставить элемент с position absolute по центру экрана.

 

Для этого метода нам нужно две вещи:

 

1. Элемент должен находиться непосредственно в body или не иметь родительского элемента с position relative. Иначе наш элемент будет отцентрирован относительно родительского, что тоже может оказаться полезным.

2. Нужно знать точную ширину элемента. Обычный блок по умолчанию занимает ширину 100%, но ширина блока с абсолютным позиционирование зависит от его контента и не обязательно растянется на всю ширину родителя.

 

Центрирование элемента с position absolute:

 

.element {

position: absolute;

left: 50%;

width: 400px;

margin-left: -200px;

 

Где 200px - это половина ширины контейнера.

 

<div class="element">Sample Text</div>

 

Результат:

 

Нажмите на "Click Me", появится абсолютно позиционированный блок расположенный по центру. Для того, чтобы его спрятать, нажмите на него.

 

Click Me
Sample Text

 

Аналогично можно цеализовать центрирование по вертикали, если вам известна высота элемента. В таком случае, нужно поставить top: 50% и margin-top: -200px (половина высоты элемента).

 

 

 

Additional Info

Комментарии  

 
0 #5 learn binary options 28.08.2017 05:51
My brother recommended I might like this web site. He was entirely right.
This post truly made my day. You can not imagine just how
much time I had spent for this info! Thanks!
 
 
0 #4 how do i buy copper 02.08.2017 15:10
Howdy! This article could not be written any better!

Looking at this article reminds me of my previous roommate!
He continually kept talking about this. I'll send this information to him.
Pretty sure he will have a very good read. Thank you for sharing!
 
 
0 #3 getwin.qwinsla.com 20.07.2017 07:41
We are a gaggle of volunteers and starting a new scheme in our community.

Your site provided us with valuable info to work on. You have done a formidable task and our whole community will likely be thankful
to you.
 
 
0 #2 call option beispiel 19.07.2017 19:48
Hi, just wanted to say, I liked this blog post.
It was inspiring. Keep on posting!
 
 
0 #1 Стас 04.09.2014 09:51
Вот спасибо выручил)
а то я думаю как его позиционировать , уже думал скрипт какой нить искать)
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов