How can I center content

Question

How can I center all the contents in the page, and make the order be right-to-left, because the alignment is to the left and the order is left to right.

here is the code:

Edit Center parent div

.grid-item {
  float: left;
  width: 270px;
  min-height: 260px;
  max-height: 260px;
  background-color: whitesmoke;
  margin-bottom: 10px;
  border: solid 5px #bfbbd9;
  padding: 7px;
}

<div class="parent-div">
  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>1</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>2</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>3</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>4</h2>
      </div>
    </div>
  </a>
</div>

Yusuf, that's happening in the current setup... Can you check? — Praveen Kumar Purushothaman, Dec 02 '17 at 03:03

score 0 · Answer 1 · answered Dec 02 '17 at 01:40

Try using inline-block for display and remove float. That should work out.

body {
  text-align: center;
}
a {
 display: inline-block;
 margin: 0 3px;
}
.grid-item {
  display: inline-block;
  width: 270px;
  min-height: 260px;
  max-height: 260px;
  background-color: whitesmoke;
  margin-bottom: 10px;
  border: solid 5px #bfbbd9;
  padding: 7px;
}

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>1</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>2</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>4</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>5</h2>
    </div>
  </div>
</a>

<a href="#">
  <div class="grid-item">
    <div style="height:71px">
      <h2>6</h2>
    </div>
  </div>
</a>

Preview in different resolutions:

Mobile

Tablet / iPad

Desktop

ET-CS · Accepted Answer · 2017-12-02T03:40:43.243

You need to:

set the parent-div to be with fixed width and centered using margin: 0 auto.
use direction: rtl and text-align: right on parent-div to align items to right with your desired direction.
change grid item to be display:inline-block instead of using float
add media queries if you want it to have more columns on heigher screen resolutions.

.parent-div {
   width: 592px;
   margin: 0 auto;
   direction: rtl;
   text-align: right;
}

@media (min-width: 900px) {
   .parent-div {
      width: 890px
   }
}

.grid-item {
  display: inline-block;
  width: 270px;
  min-height: 260px;
  max-height: 260px;
  background-color: whitesmoke;
  margin-bottom: 10px;
  border: solid 5px #bfbbd9;
  padding: 7px;
}

<div class="parent-div">
  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>1</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>2</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>3</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>4</h2>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="grid-item">
      <div style="height:71px">
        <h2>5</h2>
      </div>
    </div>
  </a>
</div>

EDIT: I have added one step for media query as example for 3 columns in heigher screen resolutions. you can run the code snippet in full screen to see the result.

If I remove the float, two columns will be displayed, and I want to use it in responsive web pages, so when the big shack will stretch — Yusuf, Dec 02 '17 at 03:30
I've been there this week (my question: https://stackoverflow.com/questions/47492844/css-html-lists-center-ul-in-page-left-align-li-items). My solution finally was similar to what I suggested here with media queries for the parent container width for different screen sizes. or.. if you want, you can achieve this using bootstrap grid on the grid items: "col-md-xs-4 col-md-sm-3 col-md-2" and probably with css tweaks for your grid-item. — ET-CS, Dec 02 '17 at 03:32
Currently there is no way in css for the parent-div to wrap the inline-block elements and to be centered using margin:0 auto. it will always will take 100% of the page width.. so media queries is your only option. (with or without using some existing grid) — ET-CS, Dec 02 '17 at 03:36
@Yusuf I have edited the answer with an example for media query — ET-CS, Dec 02 '17 at 03:42

How can I center content

2 Answers2