我正在嘗試使用HTML和CSS制作一個在線作品集，但我在一些垂直對齊方面遇到了麻煩。

我希望在屏幕的左側有一行豎排文字，上面寫著& quot我的職業& quot。在屏幕的右邊是圖片和文字，上面寫著& quot我的名字& quot，全部正常格式化。

我制作了豎排文本，但是每當我試圖在其后添加內容時，它會自動將自己與豎排文本的底部對齊。我甚至使用span來嘗試調整它，但它不起作用。我如何讓下面的內容與容器的頂部對齊？

這是我的源代碼。

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}

<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

給垂直對齊:頂部到。我的名字應該有用

vertical-align: top;

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
    /* added */
    vertical-align: top;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}

<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

只需在主要內容上使用垂直對齊:

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
    vertical-align: top;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}

<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>