如何对齐中心+左/右答案

【问题标题】：How to align center + left/right如何对齐中心+左/右
【发布时间】：2019-05-01 20:57:59
【问题描述】：

我的例子：

<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;
}

小提琴：https://jsfiddle.net/lawagabi/f7tp3x26/1/

如何在不将其扩展到整个宽度的情况下使文本右对齐在框中？

【问题讨论】：

简单解释一下，你想要什么？您的问题和描述不匹配
你能解释更多，因为问题不是 cLeAr
不确定你想要什么jsfiddle.net/lawagabi/f7tp3x26/1
我只想在“右”文本下有蓝色框，而不是整个父 div。
从班级列表中删除 col。它使用flex-grow: 1，因此使a 填充其父级的宽度。

标签： html css twitter-bootstrap flexbox

【解决方案1】：

您的.container div 课程在这里产生了影响。使用带有 right 类的 span 包裹您的锚标记以轻松解决此问题。

<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>

Fiddle

【讨论】：