CODEWITHSUNDEEP
cssflexbox
Mark Boulder
Mark Boulder

Reputation: 14307

Centering flexbox item relative to the screen

Is there a way to center Some title centered relative to the screen -- not to the length of Home sweet home or Contact? Everything should remain flexboxed.

http://jsfiddle.net/bEwWB/

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

Uncomment jQuery snippet to see Some title centered properly centered:

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

Upvotes: 0

Views: 69

Answers (2)

vals
vals

Reputation: 64264

As fas as I know, the only way to get it keeping everything flex would be setting both a and c to the same base dimension:

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

fiddle

If you want to avoid displaying the border of c not 'fitted' to the a, then you can set the border in the a instead of the div.

Upvotes: 2

Nurdin
Nurdin

Reputation: 23911

try this one

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>

Upvotes: 0

Related Questions