How to limit the size of the Body to stay centered on the screen in Css [closed]

Question

How to limit the size of the Body to stay centered on the screen in Css [closed]

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

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

}

html css body

asked by anonymous 28.11.2017 / 02:01

3 answers

TfrxRichView of FastReport changing color alone in Delphi XE? NETBEANS - JAVA - DERBY - Error retrieving byte for ImageIcon

score 0 · Answer 1

A simple way to center your content in a browser window is to apply some CSS to the body tag. The max-width property does exactly what it says, it defines a maximum width. The margin "0" sets the top and bottom 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>

score 0 · Answer 2

I believe that limiting the size of the Body itself is not 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 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 strongly accepted standard used in several frameworks. If you want to go deeper, I highly recommend using Bootstrap, it will help you a lot. : D

link

score 0 · Answer 3

Responding to comments, is it possible? Yes, here are 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.

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

Backgroundless 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 has not been limited to the given width, to correct this problem, set the background color of the document:

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

Corrected Fund

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!