如何将一组 div 向右对齐？ [复制]答案

【问题标题】：How to align a set of divs to the right? [duplicate]如何将一组 div 向右对齐？ [复制]
【发布时间】：2019-06-07 22:36:34
【问题描述】：

如何将 div 块移动到 a) 中心和 b) 对？也就是说，我希望将 innerWrap 及其内容移动到中心或右侧。

.smallW {
  width: 10%;
  height: 100px;
  background-color: green;
  float: left;
}

.largeW {
  width: 50%;
  height: 100px;
  background-color: blue;
  float: left;
}

.outerWrap {
  position: relative;
}

.innerWrap {
  background-color: yellow;
  width: 100%;
}

<div class="outerWrap">
  <div class="innerWrap">
    &nbsp;
    <div class="smallW"></div>
    <div class="largeW"></div>
    <div class="smallW"></div>
  </div>
</div>

Fiddle here

【问题讨论】：

感谢所有回答它的人，但我只能接受一个。到目前为止提供的所有答案都使用 flex，我想知道在 flex 之前的日子里它会如何完成......
居中的第一条规则：永远不要使用浮动。比 flexbox 最简单的方法是考虑 inline-block 然后简单地调整 text-align

标签： html css css-float

【解决方案1】：

.innerWrap{
 display: flex;
 flex-direction: row
 justify-content: center
}

你可以使用下面的右对齐

justify-content: flex-end

【讨论】：

谢谢，你的回答是第一位的，它有效，所以我接受了。我被 center(flex-end) 弄糊涂了。所以对于任何需要这个答案的人，你可以单独写成 justify-content: center OR justify-content: flex-end。

【解决方案2】：

为此尝试使用display: flex。使用float 更容易完成对齐。

使用 flex，您可以使用 justify-content: center; 将内部元素对齐到中心，或者使用 justify-content: flex-end; 将内部元素对齐到容器的末尾，因此您不需要使用 float 属性。这是一个示例代码。希望对你有帮助。

HTML

<div class="outerWrap">
  <div class="innerWrap">
    <div class="smallW"></div>
    <div class="largeW"></div>
    <div class="smallW"></div>
  </div>
</div>

CSS

.smallW {
  width: 10%;
  height: 100px;
  background-color: green;
}

.largeW {
  width: 50%;
  height: 100px;
  background-color: blue;
}

.outerWrap {
  display: flex;
}

.innerWrap {
  background-color: yellow;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;/* For center align */
  /* justify-content: flex-end;  */ /* Align to end */
}

JS 小提琴链接：https://jsfiddle.net/SJ_KIllshot/o7e4cjdL/

【讨论】：

【解决方案3】：

您可以在 innerWrap 中使用flexbox 对齐内容

.innerWrap.center {
    display: flex;
    justify-content: center;
}
.innerWrap.right {
    display: flex;
    justify-content: flex-end;
}

FIDDLE

.smallW {
    width: 10%;
    height: 100px;
    background-color: green;
    float:left;
}

.largeW {
    width: 50%;
    height: 100px;
    background-color:blue;
    float:left;
}


.outerWrap {
  position:relative;
}

.innerWrap {
  background-color:yellow;
  width:100%;
}

/* additional styles */
.innerWrap.center {
    display: flex;
    justify-content: center;
}
.innerWrap.right {
    display: flex;
    justify-content: flex-end;
}

<div class="outerWrap">
    <div class="innerWrap center">
        &nbsp;
        <div class="smallW"></div>
        <div class="largeW"></div>
        <div class="smallW"></div>
    </div>
    
    <br>
    
    <div class="innerWrap right">
        &nbsp;
        <div class="smallW"></div>
        <div class="largeW"></div>
        <div class="smallW"></div>
    </div>
</div>

【讨论】：

【解决方案4】：

.smallW {
    flex-basis: 10%;
    background-color: green;  
}

.largeW {
    flex-basis: 50%; 
    background-color:blue;  
}

.innerWrap {
  background-color:yellow;
  display:flex;
  justify-content:flex-end;
  height:100px;
}

<div class="outerWrap">
    <div class="innerWrap">
        &nbsp;
        <div class="smallW"></div>
        <div class="largeW"></div>
        <div class="smallW"></div>
    </div>
</div>

使用 Flex 而不是浮动。

【讨论】：