How to limit the size of Body to be centered on the Css screen

Asked

Viewed 6,042 times

1

body{
    font-family: gotham, arial, helvetica, sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
    margin: 0 auto;

}
html css body

  • Look, I don’t think you’ve ever seen it... what you can do is put something inside the body and put the size you want and center.

  • I really believe that there is no way, try to put everything inside a div

3 answers

0

A simple way to center your content in a browser window is to apply some CSS to the tag body. The estate max-width does exactly what is said, it sets a maximum width. The margin "0" sets the upper and lower margin and the "auto" sets the right and left margin.

html, body {
    height: 100%;
}

body {
    max-width: 400px;
    font-family: gotham, arial, helvetica, sans-serif;
    font-size: 18px;
    padding: 0;
    margin: 0 auto !important;
}

div {
    background: azure;
    height: 100%;
}
<div></div>

0

Responding to the comments, is it possible ? Yes, see some examples:

html, body {
  height:100%;
}
html {
  display:table;
  width:100%;
}
body {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
Conteudo da página.

Obs.: By limiting the width of the document body, the property background / background-color width shall not apply, but shall apply to the whole document.

Bottomless example

html {
  height: 100%; /* Define o tamanho do Documento HTML */
}
body {
  border: 2px solid #069;
  box-sizing: border-box;
  font-family: "Verdana";
  height: 100%;
  margin: 0 auto; /* Centraliza */
  padding: 8px;
  width: 70%; /* Define a largura do Corpo do Documento */
}
Seu conteúdo aqui!

Background example

html {
  height: 100%; /* Define o tamanho do Documento HTML */
}
body {
  background: #e3e3e3;
  border: 2px solid #069;
  box-sizing: border-box;
  font-family: "Verdana";
  height: 100%;
  margin: 0 auto; /* Centraliza */
  padding: 8px;
  width: 70%; /* Define a largura do Corpo do Documento */
}
Seu conteúdo aqui!

Note that the background color is not limited to the given width, to correct this problem, set the document background color:

html {
    background: #fff; /* Cor do fundo do documento */
    height: 100%; /* Define o tamanho do Documento HTML */
}

Corrected background

html {
    background: #fff; /* Cor do fundo do documento */
    height: 100%; /* Define o tamanho do Documento HTML */
}
body {
  background: #e3e3e3; /* Cor do fundo do corpo */
  border: 2px solid #069;
  box-sizing: border-box;
  font-family: "Verdana";
  height: 100%;
  margin: 0 auto; /* Centraliza */
  padding: 8px;
  width: 70%; /* Define a largura do Corpo do Documento */
}
Seu conteúdo aqui!

0

I believe that limiting the size of Body itself is not a good practice, however, you can create a class to center the content. 

.container {
   position: relative;
   margin-left: auto;
   margin-right: auto;
   width: 1230px;
}

And using Media Queries you can make this container responsive:

@media (max-width: 1920px){
  .container {
    width: 1230px;
  }
}

@media (max-width: 992px){
  .container {
    width: 960px;
    max-width: 100%;
  }
}

.container {
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

The use is very simple, just create a div with this class and it will already centralize the content.

<body>
     <div class="container">
         <p>Seu conteúdo aqui!</p>
     </div>
</body>

It is a widely accepted standard used in many frameworks. If you want to go deeper I strongly recommend using Bootstrap, it will help you a lot. : D

http://getbootstrap.com/docs/3.3/css/#Overview-container

http://getbootstrap.com/docs/3.3/getting-started/#download

Browser other questions tagged html css body

You are not signed in. Login or sign up in order to post.