CODEWITHSUNDEEP
htmlcsscenter
Ian Rehwinkel
Ian Rehwinkel

Reputation: 2615

HTML center element in table without overlay

I'm making a website, and it has several tables of information, I want these to be next to each other, but I want them to be centered, and not

float: left;

It should be like centered text: if it leaves the text container, it should go into a new line.

I tried 

margin: auto;

but that puts the elements under each other, but I want them to be next to each other, and go into a new "line", if they leave the div, they are in.

Upvotes: 0

Views: 53

Answers (1)

Gerard
Gerard

Reputation: 15786

You can use a flexbox

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.table {
  padding: 1em;
  border: thin solid darkgray;
  width: 20%;
}
<div class="container">
  <div class="table">Table 1</div>
  <div class="table">Table 2</div>
  <div class="table">Table 3</div>
  <div class="table">Table 4</div>
  <div class="table">Table 5</div>
  <div class="table">Table 6</div>
</div>

Upvotes: 2

Related Questions