顯示問題的圖像顯示所需結果的圖像我有三行描述用戶的文本，它們居中對齊?，F在，我試圖向用戶名添加一個圖標，這是我在 CSS 中使用 ::after 樣式完成的（見下文）。但是，在將第一行居中時會考慮這一點。我理想的情況是用戶名與文本的其余部分居中對齊，然后將圖標放置在其右側，而完全不影響對齊。我怎樣才能做到這一點？超文本標記語言 <div class="user-name"> <p> David Wood </p> </div> <p class="user-type"> Teacher </p> <p class="user-email"> [email protected]</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條經驗 獲得超5個贊
按照與對齊用戶元素相同的方式flex，您可以對用戶名中的元素執行相同的操作<p>。
.username?p?{
??display:?flex;
??align-items:?center;
}這將確保元素內的所有元素都.username p {}垂直對齊。flex-direction請注意，只有當元素的 是默認值 to時才會出現這種情況flex-direction: row。但是，如果出于任何原因，您正在使用flex-direction: column您將用于justify-content: center垂直對齊。
慕森王
TA貢獻1777條經驗 獲得超3個贊
使用更多的<div>s 并<img>為圖像使用標簽。所以代碼應該是這樣的
<div class="col-md-6">User Name</div>
<div col-md-6><img></img>
<div col-md-6> <p class="user-type"> Teacher </p> </div>
<div col-md-6> <p class="user-email"> [email protected]</p> </div>
- 2 回答
- 0 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消