CSS是網頁設計開發中不可或缺的一部分，它可以讓網頁的樣式更加美觀、整潔、易讀。其中text-align和vertical-align等屬性是用來調整文本對齊方式和垂直對齊方式的。其中top值用于將元素的頂部與包含塊的頂部對齊。

{
text-align: center;
vertical-align: middle;
}
.header {
height: 100px;
line-height: 100px;
border: 1px solid #ccc;
}
.logo {
display: inline-block;
height: 50px;
width: 50px;
vertical-align: top;
margin-right: 10px;
}

在上述代碼中，我們定義了一個.header元素，并通過text-align和vertical-align屬性將其中的元素居中對齊。我們還定義了一個.logo元素，使用了vertical-align: top屬性將其頂部與父元素的頂部對齊。這樣，即使該元素沒有設置上邊距，也可以頂部對齊。

當我們需要設計一個導航欄或者其他需要水平和垂直對齊的元素時，可以使用上述屬性進行調整，并可根據需要設置不同的對齊方式。