在 div 中對齊頭像和文本
[英]Aligning avatar and text within a div
問題描述
我有這個小提琴：
https://jsfiddle.net/bnqksu4y/
這是 HTML：
<html>
<head>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40"></a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a></h4>
<a href="https://www.website.co.uk/logout/">
Log Out</a> </div>
</body>
</html>
基本上，我希望名稱顯示在avatar的右側。 注銷應顯示在下方。
如果我在img和h4對象上使用float:left ，那么所有內容都會並排顯示，包括注銷，這不是我想要的。
怎么修？
4 個解決方案
解決方案1
2 已采納 2019-12-23 08:53:51
解決方案1：
<html> <head> </head> <body> <h2><i></i>Support Forum</h2> <div> <a href="https://www.website.co.uk/support-forums/users/chuckie/"> <img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40"></a> <h4 style="display:inline"> <a href="https://www.website.co.uk/support-forums/users/chuckie/"> Andrew Truckle</a></h4> <br> <a href="https://www.website.co.uk/logout/"> Log Out</a> </div> </body> </html>
基本上，我只是將<h4>更改為<h4 style="display:inline">
它是這樣的嗎？ 或不同的東西？
小提琴：
解決方案2
1 2019-12-23 08:54:57
我試圖在不修改 HTML 的情況下獲得解決方案。 假設您對 HTML 部分沒有任何控制權。 下面是幫助您對齊標簽的 CSS。
但是，如果您可以修改 HTML，我建議您添加一些類或 id，並將以下 CSS 添加到相應的選擇器，而不是全局應用。
解決方案：
h4, img { display: inline-block; vertical-align: middle; } a[href*="logout"] { display: block; }
<html> <head> </head> <body> <h2><i></i>Support Forum</h2> <div> <a href="https://www.website.co.uk/support-forums/users/chuckie/"> <img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40"> </a> <h4> <a href="https://www.website.co.uk/support-forums/users/chuckie/"> Andrew Truckle</a> </h4> <a href="https://www.website.co.uk/logout/"> Log Out</a> </div> </body> </html>
解決方案3
0 2019-12-23 08:54:11
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<p> <img src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g"
alt="" height="40"> <a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>.</p>
<a href="https://www.website.co.uk/logout/">Log Out</a>
</div>
</body>
最簡單的方法是將內容插入到標簽中： <p> text, image, link... </p>
解決方案4
0 2019-12-23 09:36:55
首先將Log Out鏈接的錨標簽放在div 標簽的外面和下面。 因為avatar , name和log out是 div 的兄弟和孩子，所以你不能使用浮動和彈性框來分別布局avatar ， name並在它們下面注銷。 您只能使用 CSS 相對和絕對定位進行布局
嘗試這個;
<html>
<head>
<title>Document</title>
</head>
<body>
<h2><i></i>Support Forum</h2>
<div>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
<img alt="" height="40" src="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=40&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/e8ab00a7baa7aee84ab234bfe219343e?s=80&d=mm&r=g 2x" width="40">
</a>
<h4>
<a href="https://www.website.co.uk/support-forums/users/chuckie/">
Andrew Truckle</a>
</h4>
</div>
<a href="https://www.website.co.uk/logout/">Log Out</a>
</body>
</html>
html body{
margin:0;
padding:0;
}
body div{
display: flex;
justify-content: flex-start;
align-items: center;
}
文本在DIV中未垂直對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.