首頁猿問 CSS ::影響垂直對齊的樣式后

CSS ::影響垂直對齊的樣式后

Html5

汪汪一只貓 2023-10-16 10:35:19

顯示問題的圖像顯示所需結(jié)果的圖像我有三行描述用戶的文本，它們居中對齊?，F(xiàn)在，我試圖向用戶名添加一個圖標(biāo)，這是我在 CSS 中使用 ::after 樣式完成的（見下文）。但是，在將第一行居中時會考慮這一點。我理想的情況是用戶名與文本的其余部分居中對齊，然后將圖標(biāo)放置在其右側(cè)，而完全不影響對齊。我怎樣才能做到這一點？超文本標(biāo)記語言 <div class="user-name"> <p> David Wood </p> </div> <p class="user-type"> Teacher </p> <p class="user-email"> d.wood@school.ac.uk</p>（我的一部分）CSS.user-name p::after { content: ''; background: url('homeimages/dropdown-black.png') left center no-repeat; vertical-align: middle; background-size: 10px auto; padding-left: 20px; padding-top:-20px; white-space:pre;}

查看完整描述

2 回答

慕后森

TA貢獻1802條經(jīng)驗獲得超5個贊

按照與對齊用戶元素相同的方式flex，您可以對用戶名中的元素執(zhí)行相同的操作<p>。

.username?p?{
??display:?flex;
??align-items:?center;
}

這將確保元素內(nèi)的所有元素都.username p {}垂直對齊。flex-direction請注意，只有當(dāng)元素的是默認(rèn)值 to時才會出現(xiàn)這種情況flex-direction: row。但是，如果出于任何原因，您正在使用flex-direction: column您將用于justify-content: center垂直對齊。