CSS - выравнивание div по горизонтали

Это похоже на то, что вы хотите:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id = "foo">
  <div class = "bar"></div>
  <div class = "bar"></div>
  <div class = "bar"></div>
  <div class = "bar"></div>
  <div class = "bar"></div>
  <div class = "bar"></div>
</div>

вы можете использовать свойство clip:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

обратите внимание на position: absolute и overflow: hidden, необходимые для работы clip.

Вы можете поместить в контейнер внутренний div, достаточно широкий, чтобы вместить все плавающие div.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id = "container">
  <div id = "inner">
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
  </div>
</div>

style = "overflow:hidden" для родительского div и style = "float: left" для всех дочерних divs важны для выравнивания divs по горизонтали для старых браузеров, таких как IE7 и ниже.

В современных браузерах вы можете использовать style = "display: table-cell" для всех дочерних divs, и он будет правильно отображаться по горизонтали.

Проплывите их влево. По крайней мере, в Chrome вам не нужна оболочка id = "container" в примере LucaM.

Float: left, display: inline-block не сможет выровнять элементы по горизонтали, если они превышают ширину контейнера.

Важно отметить, что контейнер не должен оборачиваться, если элементы ДОЛЖНЫ отображаться горизонтально: white-space: nowrap

Теперь вы можете использовать CSS Flexbox для выравнивания div по горизонтали и вертикали, если вам нужно. общая формула выглядит так

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}

Вы можете сделать что-то вроде этого:

#container {
  background-color: red;
  width: 200px;
}

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}

<div id = "container">
  <div id = "inner">
    <div class = "child"></div>
    <div class = "child"></div>
    <div class = "child"></div>
  </div>
</div>