Html 在容器div内对齐四个正方形div

我想把四个单div并排垂直对齐。每个div包含文本+图像。 由于某种原因，它不起作用。有些div的位置比其他div高。 我希望它看起来像这样：

div的容器：

---

DIV DIV DIV DIV DIV

---

---

只需将

垂直对齐：top

添加到

.single skills矩形中即可


正文{
保证金：0；
}
#技能容器{
高度：400px；
背景：#f8url（../Images/noised.png”）；
顶部：5px；
}
#四个矩形{
位置：绝对位置；
顶部：60px；
背景颜色：黄色；
}
.单一技能矩形{
背景色：#fff；
宽度：120px；
高度：210px；
边框：1px实心#CBCBCB；
边界半径：10px；
显示：内联块；
左边距：15px；
文本对齐：居中；
垂直对齐：顶部；
}
.单一技能{
字体大小：14px；
字号：700；
颜色：#06557c；
利润上限：35px；
}
.单一技能矩形img{
边缘顶部：30px；
}
.单一技能{
字体大小：12px；
颜色：#808080；
边缘顶部：7px；
}

个人技能
前端
CSS3、HTML5、JavaScript
后端
JAVA
设计
?
摄影
佳能和尼康
只需将
垂直对齐：顶部
添加到
单个技能矩形
类


正文{
保证金：0；
}
#技能容器{
高度：400px；
背景：#f8url（../Images/noised.png”）；
顶部：5px；
}
#四个矩形{
位置：绝对位置；
顶部：60px；
背景颜色：黄色；
}
.单一技能矩形{
背景色：#fff；
宽度：120px；
高度：210px；
边框：1px实心#CBCBCB；
边界半径：10px；
显示：内联块；
左边距：15px；
文本对齐：居中；
垂直对齐：顶部；
}
.单一技能{
字体大小：14px；
字号：700；
颜色：#06557c；
利润上限：35px；
}
.单一技能矩形img{
边缘顶部：30px；
}
.单一技能{
字体大小：12px；
颜色：#808080；
边缘顶部：7px；
}

个人技能
前端
CSS3、HTML5、JavaScript
后端
JAVA
设计
?
摄影
佳能和尼康
一种解决方案是对所有图像使用默认的
宽度
，而不管每个图像的大小：

.single-skills-rectangle img {
    width: 100px;
}

代码片段


#技能容器{
高度：400px；
背景：#f8url（../Images/noised.png”）；
顶部：5px；
}
#四个矩形{
位置：绝对位置；
顶部：60px；
背景颜色：黄色；
}
.单一技能矩形{
背景色：#fff；
宽度：200px；
高度：210px；
边框：1px实心#CBCBCB；
边界半径：10px；
显示：内联块；
左边距：25px；
文本对齐：居中；
}
.单一技能{
字体大小：20px；
字号：700；
颜色：#06557c；
利润上限：35px；
}
.单一技能矩形img{
边缘顶部：30px；
}
.单一技能{
字体大小：15px；
颜色：#808080；
边缘顶部：7px；
}
.单一技能矩形img{
宽度：100px；/*添加默认图像宽度*/
}

个人技能
前端
CSS3、HTML5、JavaScript
后端
JAVA
设计
?
摄影
佳能和尼康
一种解决方案是对所有图像使用默认的
宽度
，而不管每个图像的大小：

.single-skills-rectangle img {
    width: 100px;
}

代码片段


#技能容器{
高度：400px；
背景：#f8url（../Images/noised.png”）；
顶部：5px；
}
#四个矩形{
位置：绝对位置；
顶部：60px；
背景颜色：黄色；
}
.单一技能矩形{
背景色：#fff；
宽度：200px；
高度：210px；
边框：1px实心#CBCBCB；
边界半径：10px；
显示：内联块；
左边距：25px；
文本对齐：居中；
}
.单一技能{
字体大小：20px；
字号：700；
颜色：#06557c；
利润上限：35px；
}
.单一技能矩形img{
边缘顶部：30px；
}
.单一技能{
字体大小：15px；
颜色：#808080；
边缘顶部：7px；
}
.单一技能矩形img{
宽度：100px；/*添加默认图像宽度*/
}

个人技能
前端
CSS3、HTML5、JavaScript
后端
JAVA
设计
?
摄影
佳能和尼康
这里看起来不错，我想你的头发很好看。这就是问题所在吗？那么请以这种方式编辑你的问题。是的，但是当我添加图片时，它看起来很混乱。我认为这是因为不是所有的图像都有相同的高度。我该怎么解决呢？最好的解决方法是在同一个尺寸上使用四张图片？我认为你的图片看起来不错。这就是问题所在吗？那么请以这种方式编辑你的问题。是的，但是当我添加图片时，它看起来很混乱。我认为这是因为不是所有的图像都有相同的高度。我该如何解决它？解决它的最好方法是使用四个大小相同的图像？谢谢，它解决了问题：现在所有的矩形都在同一行上，但不幸的是它们里面的文本没有任何想法？编辑：当我添加到。单技能矩形h1顶部：150px和绝对位置。这很有帮助，现在文本在同一行，但它没有居中到div。我如何解决它？谢谢，它解决了问题：现在所有的矩形都在同一个li上
.single-skills-rectangle img {
    width: 100px;
}