将div水平对齐到中心

Question

我有这个简短的代码：

＆＃13;

＆＃13;

#div1 div {
    margin: 0% 0,5%;
    display: inline-block;
    color: white;
    border: 1px dotted yellow;
    align: center;
}
#div1 {
    margin: 0px auto;
    width: 620px;
    height: 100px;
    background-color: black;
    overflow: hidden;
    text-align: center;
}

#div2, #div10 {
    width: 21px;
    height: 100px;
}

#div3, #div9 {
    width: 60px;
    height: 60px;
}

#div4, #div8 {
    width: 70px;
    height: 70px;
}

#div5, #div7 {
    width: 77px;
    height: 77px;
}

#div6 {
    width: 85px;
    height: 85px;
}

＆＃13;

<div id="div1">
    <div id="div2">Content2</div>
    <div id="div3">Content3</div>
    <div id="div4">Content4</div>
    <div id="div5">Content5</div>
    <div id="div6">Content6</div>
    <div id="div7">Content7</div>
    <div id="div8">Content8</div>
    <div id="div9">Content9</div>
    <div id="div10">Content10</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望能够水平对齐这些div，这样它们就不会与我的主div的顶部对齐，而是与中心对齐。 我尝试了很多不同的方法，比如填充，边距，但我无法弄清楚如何去做。

你有什么想法吗？

Answer 1

只需在上面的规则中添加vertical-align:middle;：

<强> CSS

#div1 div {
  margin: 0% 0,5%;
  display: inline-block;
  color: white;
  border: 1px dotted yellow;
  align: center;
  vertical-align: middle;
}

<强> DEMO HERE

Answer 2

嘿，如果你有一些混淆或使用vertical-align:middle的问题，你可以通过以下示例

我在div中添加了一个新的div，id为div2到div10并更新了css

＆＃13;

＆＃13;

   

 #div1 > div {
			display: inline-block;
			align: center;
			margin: 0% 0, 5%;
			position: relative;
			top: 50%;
		}
			#div1 > div[id] > div {
				transform: translateY(-50%);
				color: white;
				border: 1px dotted yellow;
			}
			#div1 {
				margin: 0px auto;
				width: 620px;
				height: 100px;
				background-color: black;
				overflow: hidden;
				text-align: center;
			}

			#div2 > div, #div10 > div {
				width: 21px;
				height: 100px;
			}

			#div3 > div, #div9 > div {
				width: 60px;
				height: 60px;
			}

			#div4 > div, #div8 > div {
				width: 70px;
				height: 70px;
			}

			#div5 > div, #div7 > div {
				width: 77px;
				height: 77px;
			}

			#div6 > div {
				width: 85px;
				height: 85px;
			}

＆＃13;

<div id="div1">

			<div id="div2">
				<div>
					Content2
				</div>
			</div>
			<div id="div3">
				<div>
					Content3
				</div>
			</div>
			<div id="div4">
				<div>
					Content4
				</div>
			</div>
			<div id="div5">
				<div>
					Content5
				</div>
			</div>
			<div id="div6">
				<div>
					Content6
				</div>
			</div>
			<div id="div7">
				<div>
					Content7
				</div>
			</div>
			<div id="div8">
				<div>
					Content8
				</div>
			</div>
			<div id="div9">
				<div>
					Content9
				</div>
			</div>
			<div id="div10">
				<div>
					Content10
				</div>
			</div>
		</div>

＆＃13;

＆＃13;

＆＃13;

JSFIDDLE：https://jsfiddle.net/9tdzqvot/