CODEWITHSUNDEEP
htmlcssflexbox
TheSoundDefense
TheSoundDefense

Reputation: 6935

How to mix center alignment and left alignment in HTML

I have a design for a top-of-the-page dashboard in HTML that has the following requirements:

Like this, but not with horrible colors:

Like this, but not with horrible colors.

I was able to achieve the top three goals (or very close to it) using display: flex and giving appropriate sizes to everything, like so:

HTML:

<div class="header">
    <span class="left-text">LEFT TEXT</span>
    <button class="button">BUTTON</button>
    <span class="right-text">RIGHT TEXT</span>
</div>

CSS:

.header {
    position: absolute;
    top: 55px;
    height: 40px;
    width: 100%;
    background-color: beige;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.button {
    height: 26px;
    width: 100px;
    order: 2;
    flex-grow: 0;
}

.left-text {
    order: 1;
    flex-grow: 1;
    text-align: center;
}

.right-text {
    order: 3;
    flex-grow: 1;
    text-align: center;
}

This last requirement, though, is really throwing me for a loop; without everything being nice and centered, I feel like flex is going to need some ugly adjustments. I feel like this would be much easier if I could layer div or span elements on top of each other however I liked, but something tells me I can't. Are there any good solutions for this problem? Am I close?

EDIT: added image of mockup.

Upvotes: 0

Views: 894

Answers (2)

TheSoundDefense
TheSoundDefense

Reputation: 6935

I ended up ditching Flexbox entirely, going with absolute positioning and translate in order to get the results I wanted. Here's the final code:

HTML

<div class="header">
    <span class="more-left v-center">MORE LEFT</span>
    <span class="left-text abs-center">LEFT TEXT</span>
    <button class="button abs-center">BUTTON</button>
    <span class="right-text abs-center">RIGHT TEXT</span>
</div>

CSS

.header {
    position: absolute;
    top: 55px;
    height: 40px;
    width: 100%;
    background-color: beige;
}

.v-center {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.h-center {
    position: absolute;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.abs-center {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.button {
    height: 26px;
    width: 100px;
    left: 50%;
}

.more-text {
    left: 10px;
}

.left-text {
    left: 25%;
}

.right-text {
    left: 75%;
}

EDIT: it occurred to me that you can't really combine v-center and h-center, because one of the transform entries will completely overwrite the other, instead of combining them. Hence the abs-center class.

Upvotes: 0

The Gaming Hideout
The Gaming Hideout

Reputation: 584

Hopefully this will work for you, basically it adds the more-left class and positions it relative to the header, and you move it to the left as necessary, whatever is fitting.

HTML

<div class="header">
    <span class="more-left">MORE LEFT</span>
    <span class="left-text">LEFT TEXT</span>
    <button class="button">BUTTON</button>
    <span class="right-text">RIGHT TEXT</span>
</div>

CSS

.header {
    position: absolute;
    top: 55px;
    height: 40px;
    width: 100%;
    background-color: beige;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.button {
    height: 26px;
    width: 100px;
    order: 2;
    flex-grow: 0;
}

.left-text {
    order: 1;
    flex-grow: 1;
    text-align: center;
}

.right-text {
    order: 3;
    flex-grow: 1;
    text-align: center;
}
.more-left {
    position: relative;
    left: 15%; /* adjust as neccessary */
}

Upvotes: 1

Related Questions