Css 正确对齐元素

我一辈子都搞不清楚如何使下面代码中的图像在顶部水平对齐。我还需要让h1的对齐，以及相同的。当我使用垂直对齐属性时，它的行为似乎很奇怪

HTML:

---

您可以在主页上的中看到一个实例。请原谅未完成的网站，这是一个正在进行的工作。谢谢

替换

显示：内联块服务一

、

服务二

、

服务三

和

服务四

类中，使用

显示：表格单元格

。这会解决你的问题

比如说,

.service-one, .service-two, .service-three, .service-four{
    display: table-cell;
}

这是你的电话号码

---

希望这有帮助。

。另外，您的链接也不起作用（

.sqsp

无论如何也不是一个已知的TLD afaik）。作为旁注-有一个名为

服务一号

，

服务二号

等的

类

有什么意义？这使得它的定义非常独特，这意味着它应该是一个

id

。更正了链接！Niels，至于类vs id，我真的不知道在哪种情况下应该使用哪一个。我刚刚从大多数人那里听说，在大多数情况下都应该使用类。再说一次，我只编写了大约5周的代码。请在下面找到答案-@user2297888很棒。然后请用绿色的勾号和向上的一票接受它。谢谢@用户2297888

.services-banner {
width: auto;
height: auto;
display: block;
position: absolute;
text-align:center;
overflow: hidden;}

.service-description {
text-align:left;
font-weight: 400;
}

.service-one {
width: 225px;
height: 500px;
display:inline-block;
padding: 10px;
background-color: transparent;

}

.service-two {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}

.service-three {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}

.service-four {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}

.services-banner img {
width: 160px;
}

.service-one, .service-two, .service-three, .service-four{
    display: table-cell;
}