Box in the middle of the page according to the resolution

Asked

Viewed 405 times

2

I’m trying to position a box in the middle of the screen and regardless of the resolution the text inside it does not leave the box... Well, I can do two things: position it in the middle, but when I resize my window, the text comes out of the box; and make the box increase along with the resolution, but the box sits at the top of the page.

Here I put html and css: http://jsfiddle.net/SemNomeTol/s7ztmbL4/4/ So you can see now with the image...

css positioning

1 answer

2


I’m not sure I understand your question, but from what I understand you want to keep yours form always in the center of the screen no matter the resolution of the screen, and that it fits your content (my example is for a content of measurable size, I do not know if it meets you).

What my solution has more than its example is the following (follow the code comments):

left: 50%; /* metade da pagina */
top: 50%; /* metade da pagina */  
width: 400px; /* utilize um tamanho que seja suficiente para seu conteúdo horizontal */
height: 260px; /* utilize um tamanho que seja suficiente para seu conteúdo vertical */
margin-left: -200px; /* utilize a metade do valor setado no width para trazer o elemento ao centro horizontal da tela */
margin-top: -130px; /* utilize a metade do valor setado no height para trazer o elemento ao centro vertical da tela */

In addition to the amendments I pointed out earlier the element should continue with the position: relative; or absolute if applicable.

Follows online example to help you understand the proposed solution.

For smaller screens like tablets and smartphones you can create media queries, adding a similar rule to that in your css:

@media (max-width: 410px) {
  form {
    width: 260px;
    height: 340px;
    margin-left: -130px;
    margin-top: -170px;
  }
}

Accompany online example updated (decrease the screen to a width less than 410px, to test).

Example in Plunker, in case jsFiddle is having problems with cited by @brasofilo.

  • Man, thanks for the answer, I was wanting to use with %, no px. But if I don’t succeed, I’ll have to put anyway, I wonder if a small screen the guy doesn’t have to disarray and on a larger screen the guy doesn’t have to approach because it would be too small. You understand? But your solution works, yes. Thanks

  • @Zebradomal, track the edit response, and see if it meets your needs, and if you want to create responsive layout’s, throughout your app, consider the option of using a framework who provides you layouts in grid, which will make your life easier. I point out the bootstrap that I use since version 2.*.

Browser other questions tagged css positioning

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