Как я могу центрировать прямоугольник неизвестной ширины в CSS? - PullRequest
Новая
       8

Как я могу центрировать прямоугольник неизвестной ширины в CSS?

25 голосов
/ 13 июня 2010

У меня есть этот html: 

<div class="object-box">
    <img ... />
    <span class="caption">This is the caption</span>
</div>

, который сопровождается этим CSS: 

.object-box .caption, .object-box img {
    display: block;
}
.object-box {
    border: 1px solid;
}

Я бы хотел, чтобы окружающий div сократил содержимое.Я могу добиться этого, используя float: ... или display: inline-block.Тем не менее, я также хотел бы, чтобы он был центрирован на странице, используя margin: auto.Похоже, что эти два подхода несовместимы.

Можно ли создать такой центрированный контейнер в термоусадочной пленке, не добавляя элемент-обертку?* jsFiddle здесь

Ответы [ 7 ]

20 голосов
/ 13 июня 2010 
<!doctype html>
<html>
    <head>
    <title>ugh</title>
    <style>
        div#not-floated {
        display:table;
        margin:0 auto;
        }

        div#floated {
        float:right;
        position:relative;
        right:50%;
        }

        div#floated-inner {
        float:left;
        position:relative;
        left:50%;
        }

    </style>
    <!--[if lt IE 8]>
        <style type="text/css">

            #container { text-align: center; }
                #container * { text-align: left; }
                div#not-floated {
                    zoom: 1;
                    display: inline;
                }
        </style>
    <![endif]-->

    </head>

    <body>


    <div id="container">
        <div id="not-floated">
        <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"><br>
        ok.
        </div>
    </div>
    <div id="floated-container">
        <div id="floated"><div id="floated-inner">
        <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg">
        </div></div>
    </div>

    </body>

</html>

Простое объяснение состоит в том, что .. display:table; вызывает его сжатие в современных браузерах, это единственный способ центрировать уровень блока без ширины в современных браузерах с полем: 0 auto; .

В IE это вопрос использования родительского элемента для установки выравнивания текста: центр вашего сжатого display:inline элемента уровня блока.

Для плавающих это всего лишь 50% математики с использованием контейнеров для IE.

17 голосов
/ 20 июля 2011

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

HTML, который оборачивает div неизвестной ширины, который вы хотите центрировать: 

<div class="centered-block-outer">
 <div class="centered-block-middle">
  <div class="centered-block-inner">

   <!-- div that you'd like to center goes here -->

  </div>
 </div>
</div>

CSS: 

 /* To center a block-level element of unknown width */
 .centered-block-outer { 
   overflow: hidden;
   position: relative;/* ie7 needs position:relative here*/
 }
.centered-block-middle {
  float: left;
  position:relative;
  left:50%;
}
.centered-block-inner {
  position:relative;
  left:-50%;
}

Причина, по которой это работает, объясняется здесь: http://www.tightcss.com/centering/center_variable_width.htm

Досадная часть заключается в том, что вам нужно создать ТРИ div-ов, чтобы заставить это работать - css действительно должен обеспечить лучший способ. Но хорошо то, что это решение работает во всех браузерах и на вашем сайте.

Удачи!

1 голос
/ 01 июня 2017

CSS теперь имеет то, что называется макетом flex , и в моем ограниченном использовании до сих пор он работал очень хорошо.

https://www.w3.org/TR/css-flexbox-1/

Попробуйте что-то вроде этого: 

<html>
<head>
<style>
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-box {
    border: 1px solid;
}
</style>
</head>
<body>
  <div class="object-box">
    <img ... />
    <span class="caption">This is the caption</span>
  </div>
</body>
</html>
1 голос
/ 13 июня 2010

тег div не работает; однако тег span уменьшен до нужного размера. Надеюсь, код объясняет сам себя. Я также добавил несколько выравниваний. 

<html>
    <head>
        <title>TEST!</title>
        <style type="text/css"> 
            .object-box-wrapper{width:100%;text-align:center;}
            .object-box {
                border: 1px solid;
                text-align:left;
            }
        </style>
    </head>
    <body>
        <div class="object-box-wrapper">
            <span class="object-box">
                <span class="caption">This is the caption</span>
            </span>
        </div>
    </body>
</html>
0 голосов
/ 04 декабря 2013

что-то по этому должно работать

HTML: 

<msgbox>
    <p>
        foo
    </p>
</msgbox>

и CSS: 

msgbox {
    width: 100%;
    display: block;
    text-align: center;
}
p {
    display: inline-block;
}

... печально только то, что элемент msgbox при использовании абсолютного положения блокирует щелчок по нему (но это только связанная проблема, и она может быть не для вас)

0 голосов
/ 13 июня 2010

Единственный способ, которым я знаю, сделать это без javascript, это установить для вашего div значение position:absolute и left:50%.

0 голосов
/ 13 июня 2010

Я должен был сделать это для фотогалереи jQuery ... В результате я выбрал фотографию, текущая фотография исчезла и загрузилась новая, затем вычислил разницу ширины. половина контейнера минус половина ширины фотографии. Затем я бы установил margin-left (и margin-top по вертикали) с этим значением. 

    thewidth = $('#thephoto').width();
    theheight = $('#thephoto').height();
    $('#thephoto').css("margin-top",250-(theheight/2));
    $('#thephoto').css("margin-left",287.5-(thewidth/2));
    $('#thephoto').fadeIn(300);

Вот тут-то и пригодился мой Flash-фон:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...