Элегантный способ абсолютно центрирования div? - PullRequest
Новая
       5

Элегантный способ абсолютно центрирования div?

2 голосов
/ 02 апреля 2012

Есть ли способ без написания связки CSS и вложенных элементов div или написания сценариев jQuery с отрицательными значениями ширины?

Если нет, каков ваш предпочтительный способ реализации этого?

Я понятия не имею, почему такая простая задача не является частью спецификации html.

Редактировать: С «абсолютно» я также имею в виду вертикально центрированный!Сожалею.Плюс: он должен работать с динамической шириной (не хочу их указывать).

Мне бы хотелось иметь что-то вроде этого: 

<div class="ninja-center"></div>

И div появляется в центреэкрана.Это действительно должно быть ЭТО просто.Никаких причудливых CSS, сценариев и т. Д. Я имею в виду, что это также работает с 2, 3 или 4 способами, как это только с горизонтальным центрированием:

  • margin: auto
  • text-align: center
  • align="center" (устарел)
  • ...

Почему для вертикальных выравниваний ничего нет.

Ответы [ 4 ]

3 голосов
/ 02 апреля 2012

Если ваши спецификации не просты, решение не является либо.Если у вас есть простой запрос (один div, вы хотите, чтобы он был в центре), вы получите простое решение: просто используйте margin:auto для div с шириной.

Как эта случайная ссылка Google показывает:http://bluerobot.com/web/css/center1.html

Выдержка, которую вы хотите: 

width:500px;
margin:0px auto;

Смотрите это в действии в jfiddle @myheadhurts из комментариев: http://jsfiddle.net/8vjGA/

1 голос
/ 02 апреля 2012

Это объясняет некоторые отличные варианты центрирования:

http://css -tricks.com / centering-in-the-unknown /

0 голосов
/ 22 июня 2012

Используйте display:inline-block, vertical-align:middle и height:100% для вертикального центрирования контента, который имеет неопределенную высоту в браузерах:

  • html, body, .container, .placeholder { height: 100%;}
  • .placeholder, .wrapper { display: inline-block; }
  • .placeholder, .wrapper, .content { vertical-align: middle; }

Элемент-заполнитель имеет 100% высоту для поддержки линейного блока, так что vertical-align: middle дает желаемый эффект.

Используйте контейнер фиксированной ширины, чтобы обернуть изображения:

  • .fixed { min-width: 1px; }

Используйте следующее для горизонтального центрирования контента с неопределенной шириной по ширинебраузеры:

  • .content { display:inline; }
  • .container { text-align:center; }

Объедините оба метода для создания центрированного элемента: 

    <!doctype html>
    <html>
    <head>
    <title>Centered Image Gallery</title>
    <style type="text/css">
    html, body, .container, .placeholder { height: 100%;}
    
    img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; }
    
    .container { text-align:center; }
    
    /* Use width of less than 100% for Firefox and Webkit */
    .wrapper { width: 50%; }
    
    .placeholder, .wrapper, .content { vertical-align: middle; }
    
    /* Use inline-block for wrapper and placeholder */
    .placeholder, .wrapper { display: inline-block; }
    
    .fixed { min-width: 1px; }
    
    .content { display:inline; }
    
    @media,
     {
     .wrapper { display:inline; }
     }
     </style>
    
    </head>
      <body>
      <div class="container">
        <div class="content">
            <div class="wrapper">
              <div class="fixed">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://microsoft.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
                <img src="http://mozilla.com/favicon.ico">
                <img src="http://webkit.org/favicon.ico">
                <img src="http://userbase.kde.org/favicon.ico">
                <img src="http://www.srware.net/favicon.ico">
                <img src="http://build.chromium.org/favicon.ico">
                <img src="http://www.apple.com/favicon.ico">
                <img src="http://opera.com/favicon.ico">
            </div>
          </div>
       </div>
       <span class="placeholder"></span>
    </div>
    
    </body>
    </html>
0 голосов
/ 02 апреля 2012

Например: 

 div#giveanidnumb {
    margin:0px auto;
}

Затем вы можете добавить все спецификации CSS, которые вы хотите

...