無法使用對齊項目居中圖像
[英]Can't center images using align-items
問題描述
一般來說，我無法讓 flexbox 甚至 CSS 處理充當鏈接的圖像。 我想要的只是使用 flexbox 將圖像移動到屏幕的右側。
以下是所有相關的 HTML：
<body>
<div style="border: 2px solid red; display: flex; justify-content: flex-end;">
<a style="align-self: flex-end; margin-left: auto;" href="index.html">
<img style="width: 15%; margin-left: auto;" class="arrows" id="pointRightArrow"
src="../Images/ArrowImg.png"
alt="black arrow pointing right" />
</a>
</div>
</body>
我還發現一個人的問題與我將Image 作為 flexbox 中的鏈接完全相同的問題，但給出的解決方案對我不起作用，事實上，它實際上什么也沒做。
3 個解決方案
解決方案1
0 2022-07-27 23:48:50
只在 div 中設置規則，如果在div中設置規則位置， a和img會有沖突。
在 div 中使用：
-
display:flex到 flex 元素 -
align-items:center垂直居中元素 -
justify-content: flex-end從右對齊元素
解決方案2
0 已采納 2022-07-27 23:50:51
在a上設置 flex 使其成為伸縮項目（圖像）的父容器。
<body> <div style="border: 2px solid red; "> <a href="" style="display: flex; justify-content: flex-end;"> <img style="width: 15%;" class="arrows" id="pointRightArrow" src="https://picsum.photos/200" /> </a> </div> </body>
解決方案3
0 2022-07-28 00:01:22
您要做的第一件事是僅更改<div>中的設置；
輸入
display:flex;然后，align-items:center;最后，justify-content: flex-end;
這應該有效。
無法在 Bootstrap 中對齊項目
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.