Doubts about CSS and placements

Question

Doubts about CSS and placements

Navigation

#1 by (1 votes)

1

Let's suppose I'm going to position a div co_de 100px and height , (a square) so I place this square in width and margin-left 40% , square is more or less centralized, right? Now I'll put a text written "hi" inside it with the tag margin-top 20% , now if I use the magnifying glass, the following happens, only the right side and bottom of the square will expand while its other two sides do not expand and the text remains intact, let's say I want everything to expand without the sides moving like this?

About the code I mentioned above:

.caracteristicas{
  position: absolute;
  background-color: green;
  height: 100px;
  width: 100px;
  margin-left: 40%;
  margin-top: 20%;
}

<html>
  <head>
    <title>Aprendendo a centralizar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="caracteristicas">
      <p>oi</p>
    </div>
  </body>
</html>

css

asked by anonymous 22.01.2017 / 23:33

1 answer

How can I use two methods on the same line in python? Error DLL Connection FireDac with PostgreSQL

score 1 · Accepted Answer

Nowadays there are some more responsive techniques for centralizing a div on the screen, this is the case with the grids system.

How it works

Basically the idea of the css grids system, copies the idea of <tables> , in which you work with rows and columns.

The code

I made a simple code, in which the centralized div is centralized corresponding to its container, which is 100% screen size and centered horizontally by margin and vertically by vertical-align .

An example running:

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  display: table;
}
.container_centralizado{
  vertical-align: middle;
  display: table-cell;
  position: relative;
}
.centralizado{
  width: 200px;
  height: 50px;
  vertical-align: middle;
  margin: 0 auto;
}

/** Aqui para baixo é só para fins de estilização, favor ignorar **/

.centralizado{
  color: white;
  background: blue;
}
.centralizado span{
  width: 100%;
  line-height: 3em;
  display: block;
  text-align: center;
  font-family: arial;
}

<div class="container_centralizado">
  <div class="centralizado">
    <span>Div Centralizada</span>
  </div>
</div>

PS: It's always interesting to use meta tag viewport in your html. So, from this example, when using the "magnifying glass", the div is always centered, expanding centralized.