p {
line-height: 2em;
display: flex;
align-items: center;
}
pre {
font-family: "Courier New", monospace;
}
CSS中的垂直方向對齊是設計Web頁面時必不可少的部分，文字的垂直方向對齊也是其中之一。當我們在編寫頁面時，我們總是需要在不同元素上放置不同字體大小和樣式的文本，但是當這些元素之間的文本高度不同的時候，它們就無法在垂直方向上完美對齊。那么該怎么辦呢？
一種方法是通過line-height屬性可以設置行高，但是這種方式并不總是理想的，特別是在文本高度差異較大的情況下。換句話說，它很難確保每一行的文本在垂直方向上完美對齊。
另一種方法是使用flex布局。通過在包含文本的元素上設置display:flex，并使用align-items:center屬性，您可以輕松地垂直居中和對齊文本，即使它們有不同的字體。這種方法非常適用于文本位于容器中央的情況。
最后，為了讓您的文本更具可讀性，您可以使用pre標簽包裝代碼，確保代碼每一行都按照原始格式準確顯示，從而使代碼更加易于閱讀和理解。
綜上所述，CSS中的垂直方向對齊是設計Web頁面的必要部分，在處理不同字體大小和樣式的文本時，我們可以借助line-height屬性或者flex布局來實現垂直方向的對齊。同時，為了使代碼更加易于理解，我們也可以使用pre標簽來包裝代碼。