Центрировать элемент Div на странице?

Question

Центрировать элемент Div на странице?

0

Я искал всюду по интернету за последние 40 минут, пытаясь понять, как правильно центрировать элемент div.

Вот фрагмент моего кода, который я хочу сосредоточить:

<div id="boxcenter">
            <div id="boxoutline">
                <div id="boxmodel">
                    <p>Cupcake ipsum dolor. Sit amet sweet tiramisu sweet muffin caramels. I love lollipop sweet sweet roll fruitcake dragée.
                    Halvah tootsie roll cookie chocolate cake fruitcake sesame snaps I love I love. Chupa chups gummies I love marshmallow jelly donut powder 
                    dragée danish. Gummies I love fruitcake sweet croissant unerdwear.com dessert chocolate cake pastry.
                    Gummi bears marshmallow I love bonbon. Soufflé liquorice chocolate bar applicake marzipan sweet cake I love pie. Fruitcake 
                    wafer brownie halvah muffin muffin. Gingerbread gingerbread macaroon jelly beans icing soufflé donut marzipan candy canes.
                    </p>
                </div>
            </div>
        </div>

Вот css, который я использую, чтобы создать коробчатую модель и сосредоточить ее. Чтобы центрировать модель коробки, которую я создал, я использую div id "boxcenter". Цель состоит в том, чтобы центрировать этого плохого мальчика в верхней части страницы.

/*BOX MODEL STYLE*/
#boxmodel p{
    border: 2px dashed; 
}

#boxmodel{
    padding: 10px 20px;
    border: 15px solid green;
    margin: 20px;   
    height: 150px;
    width: 700px;   
}

#boxoutline{
    border: 2px dashed;
    width: 810px;
}

#boxcenter{
    position: fixed;
    top: 0px;
    margin: 0 auto;

}

К сожалению, все, что он делает, это показать модель окна в верхнем правом углу страницы, не совсем точно, как исправить это, как сосредоточить ее на самой странице... Любые идеи?

user2619395 18 сен. 2013, в 07:11

Источник

Теги:

html

css

3 ответа

3

Необходимо установить ширину и удалить position:fixed

#boxcenter{
  width: 810px;
  margin: 0 auto;

}

скрипка

NullPoiиteя 18 сен. 2013, в 03:07

0

Но вы можете использовать position: absolute; и должен.
DevlshOne 18 сен. 2013, в 04:54
0

@DevlshOne вы имеете в виду, как это jsfiddle.net/yNtG9/:)
NullPoiиteя 18 сен. 2013, в 05:00
0

@DevlshOne не понял, почему вы должны использовать position: absolute; Вот? В любом случае он не будет работать как фиксированный, если вы не настроите верхнее значение с помощью jQuery
Mr. Alien 18 сен. 2013, в 05:21

Показать ещё 1 комментарий

0

Необходимо установить ширину

#boxcenter {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

но если вы хотите, чтобы позиция фиксировалась, тогда

#boxcenter {
  position: fixed;
  width: 960px;
  top: 0;
  left: 50%;
  margin-left: -480px;   
}

mdesdev 18 сен. 2013, в 02:34

0

Кто проголосовал за меня, вот скрипка
mdesdev 18 сен. 2013, в 04:59

Ещё вопросы

Но вы можете использовать position: absolute; и должен.
@DevlshOne вы имеете в виду, как это jsfiddle.net/yNtG9/:)
@DevlshOne не понял, почему вы должны использовать position: absolute; Вот? В любом случае он не будет работать как фиксированный, если вы не настроите верхнее значение с помощью jQuery
Кто проголосовал за меня, вот скрипка

Love Trivedi · Accepted Answer · 2013-09-18T02-04-00.000Z

Используйте этот css, это будет отлично работать для вас

ДЕМО ЗДЕСЬ

#boxcenter{
  width: 816px;
  margin: 0 auto;

}

кто проголосовал за меня, я думаю, он не видел демо.