0

I have such code https://jsfiddle.net/96Lnxr38/3/ but as you can see - divs with class d1 are not aligned properly. If I add more spaces between <div class="d1"></div> elements - alignment will work fine. Is it a browser bug or my mistake? I have found that FF works fine and Chome/Safari show me this bug.

Egor Baranov
  • 11
  • 1
  • 5

2 Answers2

1

The problem is because of whitespace between your inline-block divs. These whitespace characters also participate in the flow and take up space between inline or inline-block elements.

Try simply removing spaces between your div.d1 elements:

.cont {
      text-align: center;
      width: 500px;
      word-spacing: 80px;
    }

    .d1 {
      width: 300px;
      height: 500px;
      margin-top: 10px;
      background-color: red;
      display: inline-block;
    }
<body>
  <div class="cont">
    <!-- Note no whitespace between divs -->
    <div class="d1"></div><div class="d1"></div><div class="d1"></div>
  </div>
</body>

Another option is to change the display to block in your .d1 style.

Matvey Andreyev
  • 1,021
  • 10
  • 21
  • Thank you for the answer, but there are two problems: I can not change `display` to `block` because I want to have all three elements on the same line for wide screens (it was not shown in the example) and I can not remove whitespaces because in this case there will be no 80px spaces between d1 divs when its in the same line. – Egor Baranov Apr 01 '17 at 08:13
  • Got the point. You could use margin instead of word-spacing. Try setting left and right margins to 40px for .d1 – Matvey Andreyev Apr 01 '17 at 08:44
0

If you are using a pixel width, the best solution is margin:auto;

.cont {
  text-align: center;
  width: 500px;
  margin:auto;
}

.d1 {
  width: 300px;
  height: 500px;
  margin-top: 10px;
  background-color: red;
  display: inline-block;
  margin:auto;
}

follow this link : https://jsfiddle.net/96Lnxr38/6/

Burhan Kashour
  • 674
  • 5
  • 15