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

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 >
  <div  style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

CodePudding user response：

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 >
  <div  style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div  style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div  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/.

CodePudding user response：

you can do that with the following code