My example:
<div class="container">
<div class="d-flex justify-content-between">
<div class="col justify-content-center flex-column d-flex">
left
</div>
<div class="col justify-content-center flex-column d-flex right">
<a href="/">right</a>
</div>
</div>
</div>
.container div {
height: 100px;
background-color: red;
}
a {
background-color: blue;
}
.right {
text-align: right;
}
Fiddle: https://jsfiddle.net/lawagabi/f7tp3x26/1/
How can I make text-align right in box with right without expanding it to the entire width?
Your .container div
class is having an affect here. Wrap your anchor tag with a span with the right
class to easily fix this.
<div class="container">
<div class="d-flex justify-content-between my-auto">
<div class="col justify-content-center flex-column d-flex">
left
</div>
<div class="col justify-content-center flex-column d-flex">
<span class="right"><a href="/">right</a></span>
</div>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.