CSS Flexbox居中对齐问题

我有一个flexbox容器，其中包含2个div项目。 Flexbox容器设置为以内部为中心的行。我试图找出一种方法将第一个项目的行内容居中，然后让第二个项目位于第一个居中项目的右侧。CSS Flexbox居中对齐问题

下面是我结束不得不做的第一件物品使用flexbox居中，但我必须将第二件物品绝对定位到所需的位置。有没有办法去除第二个物品的绝对位置，并让它出现在第一个物品的右侧，它居中？

HTML

<div class="center-container"> 
    <div class="time"> 
     <span id="time">00:00</span> 
    </div> 
    <div class="time-ampm"> 
     <span id="time-ampm">XX</span> 
    </div> 
</div>

CSS

.center-container { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: center; 
} 

.time { 
    flex: 1; 
    font-size: 50px; 
    font-weight: 300; 
    color: #262626; 
} 

.time-ampm { 
    position: absolute; 
    top: 115px; 
    left: 288px; 
    /* flex: 1; <= this is what I want to use, not the absolute positioning used above */ 
    font-size: 20px; 
    font-weight: 400; 
    color: #858585; 
}

此线表示如果两个项的使用Flexbox的设置Flexbox的中心内容（不是绝对定位如上）

current center

此行显示了我想要的Flexbox的居中项目（集中在第一项）

desired center

来源

2015-05-22 anthonylawson

只是反射。你想让你的物品增长（flex-grow> 0）吗？在这种情况下，这些物品将占用容器的全部空间，并且毫无意义地说我的文本必须位于另一个物品的旁边......或者我是否会误解某些东西？ – vals

关于偏移项宽度设置为0，怎么办？

HTML：

<div class="container"> 
    <div>12:20</div> 
    <div class="offset">AM</div> 
</div>

和CSS：

.container { 
    display:flex; 
    justify-content: center; 
    align-items:baseline; 
} 
.offset { 
    width:0; 
}

http://codepen.io/anon/pen/dopQqo

来源

2015-05-22 19:09:45 moonbase

CSS Flexbox居中对齐问题

回答

相关问题