How to make the row and column in the cneter of div?

user_10120711 0
Viewed 35

The below code shows 3 columns on the left of the page, how to make these columns in the center?

css file

.column {
  float: left;
  width: 12%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

html file

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

enter image description here

css html
3 Answers

You can use flex layout for this by adding display: flex to the row container. By specifying justify-content: center all flex items will be centered inside the flex container.

You can also avoid that float stuff which is not intended for box layouts but for text and images.

.row {
  display: flex;
  justify-content: center;
}

.column {
  width: 12%;
  padding: 10px;
  height: 300px;
}
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

For more infos on flex check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox and the very handy cheat sheet here https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

user_11674280

you can do that with the following code 

.column {
  width: 12%;
  padding: 10px;
  height: 300px;
}

.row {
  display: flex;
  justify-content: center;
}
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

Is there any exact reason why you want to use

.row:after {
  content: "";
  display: table;
  clear: both;
}
user_57188030

Flex is all you need. Just add the following to your css:

    .row {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
user_178407040
Related