How to mix center alignment and left alignment in HTML

Question

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

Everything should be vertically centered within the dashboard.
It should have a button in the exact center.
It should have text centered at the 25% and 75% marks.
It should have one last group of text all the way to the left.

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.

Could you give us a simple visual mock-up of what you're trying to achieve? — hungerstar, Nov 30 '15 at 18:20
What is the problem here https://jsfiddle.net/2Lzo9vfc/238/? — Nenad Vracar, Nov 30 '15 at 19:09
@NenadVracar the other elements are no longer centered. Most importantly, the button is no longer right in the center of the page. — TheSoundDefense, Nov 30 '15 at 19:11
Maybe something like this but you would have to fix it with media queries https://jsfiddle.net/2Lzo9vfc/239/ — Nenad Vracar, Nov 30 '15 at 19:14
Well this isn't really an application designed for mobile anyhow, so I don't think that's a huge deal. — TheSoundDefense, Nov 30 '15 at 19:17
You may find this answer helpful: [Methods for Aligning Flex Items](http://stackoverflow.com/a/33856609/3597276) — Michael Benjamin, Nov 30 '15 at 19:29
@NenadVracar I ended up using your solution with the translate item, but for every element in the header. What do you mean by fixing it with media queries? — TheSoundDefense, Nov 30 '15 at 19:36

score 1 · Answer 1 · answered Nov 30 '15 at 19:16

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 */
}

TheSoundDefense · Answer 2 · 2016-01-21T22:43:10.283

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.

How to mix center alignment and left alignment in HTML

2 Answers2

HTML

CSS