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

У меня есть этот 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. Эти два подхода не кажутся совместимыми.

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

EDIT:

jsFiddle здесь

Ответы

Ответ 1

<!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 это вопрос использования родительского элемента для установки text-align: center на ваш элемент уровня блока display:inline, сжатый с помощью термоусадки.

Для float его только 50% -ная математика с использованием контейнеров для IE.

Ответ 2

Просто прошу много месяцев спустя. Центрирование 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 действительно должен обеспечить лучший способ. Но хорошая часть этого решения работает в браузерах и на вашем сайте.

Удачи!

Ответ 3

Тег 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>

Ответ 4

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

HTML:

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

и CSS:

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

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

Ответ 5

В 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>

Ответ 6

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

Ответ 7

Мне нужно было сделать это для фотогалереи 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);

Вот где мой флэш-фон действительно пригодится:)