CODEWITHSUNDEEP
htmlcentercss
user4058211
user4058211

Reputation:

how i center div elements horizontally in css?

How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?

So:

---||||-||||-||||---

--------||||--------

When i write:

<div style="float: left; position: relative; left: 50%;">
  <div style="float: left; position: relative; left: -50%;">
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
    ...
  </div>
</div>

Then after a element go down, all div elements go to the left side.

Upvotes: 4

Views: 599

Answers (3)

Andrew V
Andrew V

Reputation: 522

You could use media queries to write different css code for different sizes:

Media Queries

Upvotes: -1

JRulle
JRulle

Reputation: 7568

I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:

I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:

<div class="container">
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
</div>

The CSS modifies the display settings of the blocks and the text-alignment of the container:

div.block { 
  display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
  width: 315px; 
  margin: 10px 0; 
  height: 340px; 
}
div.container { 
  width: 100%; 
  text-align: center;  /* this is the magic that centers the elements */
}

I put together a small demo that should help demonstrate this method: JSFIDDLE


Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):

<div class="container">
    <div class="block">Text</div><!--
    --><div class="block">Text</div><!--
    --><div class="block">Text</div>
</div>

<div class="container">
    <div class="block">Text</div
    ><div class="block">Text</div
    ><div class="block">Text</div>
</div>

reference for the quirk behavior

Upvotes: 6

Wild Beard
Wild Beard

Reputation: 2927

Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.

.container {
  width: 100%;
}
.three {
  width: 33%;
  min-width: 225px;
  float: left;
  border: 1px solid black;
}
<div class="container">
  
  <div class="three">
    <p>Something</p>
  </div>
  
  <div class="three">
    <p>Something</p>
  </div>
  
  <div class="three">
    <p>Something</p>
  </div>
  
</div>

Run the snippet.

Upvotes: 1

Related Questions