How do I center a web page here?

Question

To center I use CSS: * { margin: 0px ; padding 0px; } and in the div container, #container { margin-left: auto; margin-right: auto }

Answer 1

You can also control the overall size if you don't want it to grow over a maximum width and then center within that constraint using a media query.

// using 1080 as an example

@media screen and (min-width: 1079px) {

body {
max-width: 1080px;
margin: 0 auto;
}
}

Answer 2

WhyFry, HNNX 🐿, EmmanueL Z. (Zé), Spiff Jekey Green I really appreciate your answers, I will try them all. Thank you so much!

Answer 3

Yes, I use width. I would like to center this:

https://code.sololearn.com/WF46eJDR4d8d/?ref=app

Answer 4

Hello, when you say center, do you mean you want your content to fit the screen without needing to scroll the page in width? (I'm seeing it from a mobile).
If so maybe you should try to use % instead of px for your width.Also exists @mediaqueries in CSS to adapt content to a screen.(you can make a search on it)
Except from that I don't know because your elements seem centered and balanced to me beside the need to scroll.
Sorry if I'm off topic.

Answer 5

EmmanueL Z. (Zé) Hello, what I wanted was for the page to be centered, that is, to have spaces in each margin. Maybe setting margins is enough. I tried it with px and it didn't work, I'm going to investigate the rest. The floats are because I wanted to add images (which I don't know how to do here either). I appreciate your answer very much, you are very kind!

Answer 6

<div id='container'>
</div>
CSS
#container {
margin: 0 auto;
width: 100px;
border: solid 1px #000000;
}

Answer 7

* selector is used for css resets -

pick an element and use the width/margin property to center the page

Answer 8

You could do this:
element {
position:relative;
margin:auto;
}

Answer 9

Also,I think margin:auto; is enough,no need to margin-left:auto & margin-top:auto;
And you used a lot of float:left; maybe it have some effects on what you'd like to have.

Answer 10

You've welcome,so in addition to what Whyfry suggested,you could try that:

Body{
margin:0;
}
#container{
width:80%;
height:80%;
margin:auto;
}
And then maybe pass others width and height in the CSS in %.
(Ex:an element of width 100% will occupy the whole width of the container in which it is)
Try that simple first and if it doesn't work,change one value at a time to see what it does.

Also you can try:

body {
margin:0;
padding:20%;
}
#container{
width:100%;
height:100%;
}

Answer 11

Ooh here again🙂,I re-read your answer,maybe you re confusing between margin and padding.
If you give margin to a container it will give some spaces relatively to the other container in which it is( the box will separate from the exterior box),if you give padding the content inside your box will separate from the border of that same box.
I hope I make no mistake (I m quite a beginner ) and that someone will correct if I'm wrong.
Have a good day.

Answer 12

Paul K Sadler yes, at the time I asked the question I didn't know that. Thank you!