CODEWITHSUNDEEP
htmlcss
lei lei
lei lei

Reputation: 1829

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

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

Upvotes: 1

Views: 47

Answers (3)

Summy
Summy

Reputation: 533

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;
}

Upvotes: 1

Kevin K Varughese
Kevin K Varughese

Reputation: 346

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

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

Upvotes: 0

lupz
lupz

Reputation: 3638

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/.

Upvotes: 1

Related Questions