Я искал всюду по интернету за последние 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;
}
К сожалению, все, что он делает, это показать модель окна в верхнем правом углу страницы, не совсем точно, как исправить это, как сосредоточить ее на самой странице... Любые идеи?
Используйте этот css, это будет отлично работать для вас
#boxcenter{
width: 816px;
margin: 0 auto;
}
Необходимо установить ширину и удалить position:fixed
#boxcenter{
width: 810px;
margin: 0 auto;
}
position: absolute;
и должен.
Необходимо установить ширину
#boxcenter {
position: relative;
width: 960px;
margin: 0 auto;
}
но если вы хотите, чтобы позиция фиксировалась, тогда
#boxcenter {
position: fixed;
width: 960px;
top: 0;
left: 50%;
margin-left: -480px;
}