垂直對齊頂部不工作？

#myid{ 
 
     border:1px solid black; 
 
    } 
 
    
 
    #myid code { 
 
     border:1px solid black; 
 
    \t font-size: 1.5em; 
 
    \t line-height: 3em; 
 
    \t vertical-align:top; 
 
    }

<main> 
 
    \t <p id="myid">trying to understand <code>vertical-align</code> better.</p> 
 
    </main>

爲什麼在代碼框中沒有對準周圍的P功能框的頂部？

來源

2017-07-24 user3182532

https://stackoverflow.com/questions/35529582/vertical-align-not-working-on-內嵌塊 – Tschitsch

我還是不明白：根據你的鏈接，vertical-align影響我的代碼標籤內的內容/文本，對吧？但如果我從上到下更改對齊方式，唯一移動的是周圍p標籤內的文本。這很混亂，沒有任何意義？ – user3182532

第一個問題是，你給3EM代碼標籤的線高度，這是不必要的，我編輯了自己的代碼，請參見下面

HTML

<main> 
    <p id="myid">trying to understand <code>vertical-align</code> better.</p> 
</main>

CSS

#myid{ 
    border:1px solid black; 
    padding: 20px; 
    line-height: 100%; 
} 

#myid code { 
    border:1px solid black; 
    font-size: 1.5em; 
    vertical-align:top; 
}

這裏是一個fiddle你

來源

2017-07-24 08:25:36

我已經明白了行高度是如何工作的，並且在這個例子中它是一個問題，謝謝。我真的不明白爲什麼組成這個例子的人爲了解釋縱向對齊把那個行高放在那裏。這完全混淆了事情。但是我不明白爲什麼在我的原始示例中將垂直對齊從「頂部」更改爲「底部」會更改周圍p盒內文本的位置？ – user3182532

垂直對齊用於對齊容器內的元素，在您的情況下，main內的文本具有法線高度，除了代碼標記內部的文本外，這就是爲什麼當您使用align bottom時，所有文本均與其父容器的底部對齊代碼文本，因爲它的行高比其他文本高3倍 –

「豎直對齊用於對齊容器內的元素」 - >爲什麼這個選項隻影響代碼框內的文本？我希望代碼框內的文本（我用黑線包圍）與頂部/底部1px黑線對齊？ – user3182532

作出這樣，它的工作原理：

#myid{ 
    border:1px solid black; 
}

添加獨特的CSS選擇

#myid code { 
    border:1px solid black; 
    font-size: 1.5em; 
    vertical-align:super; 
}

來源

2017-07-24 08:29:51

垂直對齊頂部不工作？

回答

相關問題