如何將文本對齊到 div 的右側？
[英]How can I align text to the right side of a div?
問題描述
我基本上是想把綠色圓圈里的東西移到紫色的盒子里。
.counter { margin-left: 20%; margin-right: 20%; width: 382px; }.counter-right { margin-left: 60%; text-align: right; }
<div class="counter"> <img class="counter.img" src="https://via.placeholder.com/100" alt="Counter"> <div class="counter-right"> <h1>Counter</h1> </div> </div>
2 個解決方案
解決方案1
1 2022-02-25 20:18:38
大利潤並不是一個很好的布局方式。 您應該使用內聯塊顯示或flexbox 。
.counter { margin-left: 20%; margin-right: 20%; display: flex; /* defaults to "row" (horizontal orientation) */ background: #ddd; }.counter-left { flex: 1; /* stretch to use all available space */ }.counter-right { flex: none; /* use only the space needed by contents */ background: pink; }
<div class="counter"> <div class="counter-left"> <img class="counter.img" src="https://via.placeholder.com/100" alt="Counter"> </div> <div class="counter-right"> <h1>Counter</h1> </div> </div>
解決方案2
0 2022-02-25 21:25:42
如果您對display: flex不滿意，這是另一個簡單的解決方案：
根據需要使用margin和padding作為間距。
.counter { width: 100%; }.counter-left { float: left; }.counter-right { float: left; /* border: 1px solid red; */ line-height: 10px; padding-left: 10px; } <body> <div class="counter"> <div class="counter-left"> <img class="counter.img" src="https://via.placeholder.com/300" alt="Counter"> </div> <div class="counter-right"> <h1>Counter</h1> </div> </div> </body>
如何將div移動到屏幕右側但是div的左邊框的文本對齊？
[英]How do I move a div over to the right side of the screen but have the text align of the left border of the div?
如何在 flex 顯示中將文本與容器 div 的右側對齊？
[英]How to align text to right side of the container div in flex display?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.