All geek questions in one place

Make a content center

I have the following problem. I have a container that reacts so that it will be the width of the browser. Or, when the browser is large enough, a sidebar will appear next to it.

Inside this div, I have about 10 elements with the following css:

display:block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
float:left;

Thus, they form a grid.

At this point, it happens that when the div container is 440px wide, for example. They will smile beautifully 2 on each row. But when the width of the container is 600, for example. still 2 diplayed with a large white area on the left.

Now I want to focus them. Therefore, 2 must be centered in the container. I would do this by adding another container that warps the elements and giving it margin: auto; But this does not work:

Fiddle: http://jsfiddle.net/kqvcnugs/

, , ?

!

+4
4

? http://jsfiddle.net/kqvcnugs/7/

a display: inline-block; div text-align: center;

:

.parent { text-align: center; }
.children { display: inline-block; }

!:)

: postoverflow post

+3

CSS3 .

  • justify-content: center .
  • flex-wrap: wrap , .

body {
  width: 100%;
  background: blue;
}
div {
  background: red;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
a {
  display: block;
  width: 200px;
  height: 200px;
  background: tomato;
  margin: 10px;
  float: left;
}
<body>
  <div>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
  </div>
</body>
Hide result
+2

float display:inline-block;, text-align:center; .

body{
    width: 100%;
    background: blue;
}
div {
   background: red;
   overflow:hidden;
  /* Add text-align:center; */
    text-align: center;
}

a{
    /* Change to display:inline-block; remove float */
    display:inline-block;
    width:200px;
    height: 200px;
    background: tomato;
    margin: 10px;
}
<body>
<div>
    <a></a>
    <a></a> 
    <a></a> 
    <a></a> 
    <a></a> 
    <a></a> 
</div>
</body>
Hide result

Jsfiddle

+1
source

you can try the following:

body{
    width: 100%;
    background: blue;
}
div {
   background: red;
   overflow:hidden;
    text-align: center;
}

a{
    display:inline-block;
    width:200px;
    height: 200px;
    background: tomato;
    margin: 10px;


}

DEMO HERE

+1
source

Source: https://habr.com/ru/post/1614617/

More articles:


All Articles