it-swarm.com.ru

CSS: адаптивный способ центрирования жидкого div (без ширины px) при ограничении максимальной ширины?

Я видел миллион вопросов о том, как центрировать элемент блока, и, кажется, есть пара популярных способов сделать это, но все они полагаются на фиксированную ширину пикселей. Затем либо margin:0 auto, либо с абсолютным/относительным позиционированием и left:50%; margin-left:[-1/2 width]; и т.д. Мы все знаем, что это не сработает, если ширина элемента установлена ​​в%.

Неужели нет способа сделать это действительно плавным способом? Я говорю об использовании % для ширины (not установка десятков медиа-запросов с постоянно уменьшающейся фиксированной шириной). 

Осторожно: есть множество решений, которые используют модное слово «отзывчивый», но не отвечают на мой вопрос (потому что они в любом случае используют фиксированную ширину). Вот пример .

Update: Я почти забыл: как вы справляетесь с ограничением максимальной ширины центрированного элемента и все еще держите его в центре? Смотрите мой комментарий под ответом @ smdrager. Пример из жизни. Я хочу, чтобы всплывающее сообщение или эффект светового окна, содержащий абзац текста, отображался по центру окна, а текст плавно переносился в зависимости от ширины. Но я не хочу, чтобы текстовое поле растянулось слишком далеко, где текст будет трудно читать (представьте 4-футовый экран с тремя абзацами, растянутыми на одну строку текста). Если вы добавите максимальную ширину для большинства подходов, центрированный прямоугольник перестанет центрироваться при достижении максимальной ширины.

24
emersonthis

Центрирование по горизонтали и вертикали

На самом деле, наличие высоты и ширины в процентах делает центрирование еще проще. Вы просто смещаете левый и верхний угол на половину области, не занятой элементом div.

Так что если у вас рост 40%, то 100% - 40% = 60%. Таким образом, вы хотите 30% выше и ниже. Тогда вершина: 30% добиваются цели.

Смотрите пример здесь: http://dabblet.com/Gist/5957545

Центрирование только по горизонтали

Используйте inline-block. Однако другой ответ здесь не будет работать для IE 8 и ниже. Для этого вы должны использовать CSS-хак или условные стили. Вот версия взлома:

Смотрите пример здесь: http://dabblet.com/Gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

Правка

Используя медиа-запросы, вы можете комбинировать два метода для достижения желаемого эффекта. Единственное осложнение - высота. Вы используете вложенный div для переключения между% width и 

http://dabblet.com/Gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
39
smdrager

Из статьи Криса Койера о ширина центрирования в процентах элементы:

Вместо использования отрицательных полей вы используете отрицательную функцию translate() трансформирует.

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Codepen

16
Brian Phillips

Я думаю, что вы можете использовать display: inline-block для элемента, который вы хотите центрировать, и установить text-align: center; для его родителя. Это определенно центрирует div на всех размерах экрана.

Здесь вы можете увидеть скрипку: http://jsfiddle.net/PwC4T/2/ Я добавляю код здесь для полноты.

HTML

<div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

CSS

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

Для вертикального центрирования я «отказался» от поддержки некоторых старых браузеров в пользу display: table;, которые абсолютно сокращают код, см. Эту скрипку: http://jsfiddle.net/jFAjY/1/

Вот код (снова) для полноты:

HTML

<body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

Преимущество такого подхода? Вам не нужно иметь дело с any percantage, он также правильно обрабатывает тег <video> (html5), который имеет два разных размера (один во время загрузки, один после загрузки, вы не можете получить размер тега до видео загружено).

Недостатком является то, что он отказывается от поддержки некоторых старых браузеров (я думаю, IE8 не справится с этим правильно)

12
Fire-Dragon-DoL

Правка :
http://codepen.io/gcyrillus/pen/daCyu Таким образом, для всплывающего окна необходимо использовать свойство position: fixed, display: table и max-width со значениями em или rem: )
с этой основой CSS:

#popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}
1
G-Cyr

Это может звучать очень упрощенно ...

Но это будет центрировать div внутри div, точно в центре относительно левого и правого поля или родительского контейнера, но вы можете отрегулировать процент симметрично слева и справа.

margin-right: 10%;
margin-left: 10%;

Затем вы можете настроить%, чтобы сделать его настолько широким, насколько вы хотите.

0
Bruno Vincent

Что-то вроде этого может быть так?

HTML

 <div class="random">
        SOMETHING
 </div>

CSS

body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

ДЕМО: http://jsfiddle.net/t5Pp2/2/

Правка: добавление display:block ничего не разрушает, так что ...

Вы также можете установить поле: margin: 0 auto 0 auto;, чтобы быть уверенным, что оно центрируется только так, а не сверху.

0
Ms. Nobody