Question

有没有办法让Some title centered相对于屏幕居中 - 而不是Home sweet home或Contact的长度？一切都应该保持灵活性。

HTML：

<div class="main">
    <div class="a"><a href="#">Home sweet home</a></div>
    <div class="b"><a href="#">Some title centered</a></div>
    <div class="c"><a href="#">Contact</a></div>
</div>

CSS：

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c { margin-left: auto; text-align: right; }

取消注释jQuery代码段，以便Some title centered正确居中：

// var new_width = $('.a').outerWidth();
// $('.c').css('width', new_width);

Answer 1

正如我所知，让它保持一切灵活性的唯一方法是将a和c设置为相同的基本维度：

.a, .c {
    flex-basis: 120px;
}

fiddle

如果你想避免显示c的边框，那就不适合＆＃39;到a，然后你可以在a中设置边框而不是div。

Answer 2

尝试这个

CSS

.main #nav li {
    float: left;
    background-color: #eee;
    list-style-type: none;
    width: 33%;
    text-align: center;
    border: thin solid #666;
}

HTML

 <div class="main">
        <ul id="nav">
        <li><a href="#">Home sweet home</a></li>
        <li><a href="#">Some title centered</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

将flexbox项目相对于屏幕居中

2 个答案: