Horizontally and vertically center span in css graphic with divs

Question

I'm currently "designing" the following process with css / divs.

Unfortunately as you can see, the text is always on the top left. I'd like the text to be centered vertically and horizontally inside the div. But the problem is when doing so, it always moves the "end arrow" of the div.

Here is a JSFiddle with the problem: https://jsfiddle.net/xeraphim/7wbeapqu/

.gateuebersicht {
 width: 100%;
 height: 60px;
}
 .rectangle {
 width: 130px;
 height: 60px;
 background-color: #aaa;
 float: left;
}
 .passed .rectangle {
 background-color: #179f96;
}
 .rectangle span {
 position: absolute;
 color: white;
 max-width: 85px;
}
 .rectangle-left {
 border-style: solid;
 border-width: 30px 15px 30px 0;
 border-color: transparent #fff transparent transparent;
}
 .rectangle-right {
 border-style: solid;
 border-width: 30px 0 30px 15px;
 border-color: transparent transparent transparent #fff;
 float: left;
}
 .rectangle-end {
 border-style: solid;
 border-width: 30px 0 30px 15px;
 border-color: transparent transparent transparent #aaa;
 float: left;
}
 .passed .rectangle-end {
 border-color: transparent transparent transparent #179f96;
}
 .gate {
 overflow: hidden;
 float: left;
}
 .gate .rectangle-left {
 border-color: transparent #aaa transparent transparent;
 overflow: hidden;
 float: left;
}
 .passed .gate .rectangle-left {
 border-color: transparent #179f96 transparent transparent;
}
 .gate .rectangle-right {
 border-color: transparent transparent transparent #aaa;
 overflow: hidden;
 float: left;
}
 .passed .gate .rectangle-right {
 border-color: transparent transparent transparent #179f96;
}
 .gate-middle {
 width: 40px;
 height: 60px;
 background-color: #aaa;
 overflow: hidden;
 float: left;
}
 .passed .gate-middle {
 background-color: #179f96;
}
 .gate-middle span {
 position: absolute;
 color: white;
}

<div class="gateuebersicht mb-4">

  <div id="idee">
    <div class="rectangle">
      <span class="mt-3 ml-3">Idee</span>
      <div class="rectangle-left">

      </div>
    </div>
  </div>

  <div id="gate-a" class="passed">
    <div class="gate">
      <div class="rectangle-left"></div>
      <div class="gate-middle">
        <span class="mt-3 ml-3">A</span>
      </div>
      <div class="rectangle-right"></div>
    </div>
  </div>

  <div id="vorprojekt">
    <div class="rectangle">
      <span class="mt-1 ml-4">Vorprojekt / Initialisierung</span>
      <div class="rectangle-right"></div>
      <div class="rectangle-left"></div>
    </div>
  </div>

  <div id="gate-b">
    <div class="gate">
      <div class="rectangle-left"></div>
      <div class="gate-middle">
        <span class="mt-3 ml-3">B</span>
      </div>
      <div class="rectangle-right"></div>
    </div>
  </div>

  <div id="konzept">
    <div class="rectangle">
      <span class="mt-1 ml-4">Konzept / MVP </span>
      <div class="rectangle-right"></div>
      <div class="rectangle-left"></div>
    </div>
  </div>

  <div id="gate-c">
    <div class="gate">
      <div class="rectangle-left"></div>
      <div class="gate-middle">
        <span class="mt-3 ml-3">C</span>
      </div>
      <div class="rectangle-right"></div>
    </div>
  </div>

  <div id="realisierung">
    <div class="rectangle">
      <span class="mt-3 ml-4">Realisierung</span>
      <div class="rectangle-right"></div>
    </div>
    <div class="rectangle-end"></div>
  </div>

  <div id="einfuehrung">
    <div class="rectangle">
      <span class="mt-3 ml-4">Einführung</span>
      <div class="rectangle-right"></div>
      <div class="rectangle-left"></div>
    </div>
  </div>

  <div id="gate-d">
    <div class="gate">
      <div class="rectangle-left"></div>
      <div class="gate-middle">
        <span class="mt-3 ml-3">D</span>
      </div>
      <div class="rectangle-right"></div>
    </div>
  </div>

  <div id="betrieb">
    <div class="rectangle">
      <span class="mt-3 ml-4">Betrieb</span>
      <div class="rectangle-right"></div>
    </div>
    <div class="rectangle-end"></div>
  </div>

</div>

How is it possible to center the text inside the divs without the other divs moving?

Thanks in advance

Thank you for posting your code, I've converted it into a runnable Stack Snippet; so it can be seen running on this site instead of needing to go to JS Fiddle. Could you edit the snippet, to ensure that your pre-processor is loaded (or compile it so that it's regular CSS). — David Thomas, Jan 21 '22 at 11:44
@DavidThomas oh cool thanks, didn't know about the runnable snippets :-) I've compiled the scss to css so it should look correct now — xeraphim, Jan 21 '22 at 11:47

score 1 · Accepted Answer · answered Jan 21 '22 at 11:50

Created a new class r-center and added css for it, applied the class to all divs that have values init and it's working.

.r-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gateuebersicht {
    width: 100%;
    height: 60px;
}

.rectangle {
    width: 130px;
    height: 60px;
    background-color: #aaaaaa;
    float: left;
    position: relative;

    .passed & {
        background-color: #179f96;
    }

    span {
        position: absolute;
        color: white;
        max-width: 85px;
    }
}

.rectangle-left {
    border-style: solid;
    border-width: 30px 15px 30px 0;
    border-color: transparent #fff transparent transparent;
}

.rectangle-right {
    border-style: solid;
    border-width: 30px 0 30px 15px;
    border-color: transparent transparent transparent #fff;
    float: left;
}

.rectangle-end {
    border-style: solid;
    border-width: 30px 0 30px 15px;
    border-color: transparent transparent transparent #aaaaaa;
    float: left;

    .passed & {
        border-color: transparent transparent transparent #179f96;
    }
}

.gate {
    overflow: hidden;
    float: left;
    position: relative;
}

.gate .rectangle-left {
    border-color: transparent #aaaaaa transparent transparent;
    overflow: hidden;
    float: left;

    .passed & {
        border-color: transparent #179f96 transparent transparent;
    }
}

.gate .rectangle-right {
    border-color: transparent transparent transparent #aaaaaa;
    overflow: hidden;
    float: left;

    .passed & {
        border-color: transparent transparent transparent #179f96;
    }
}

.gate-middle {
    width: 40px;
    height: 60px;
    background-color: #aaaaaa;
    overflow: hidden;
    float: left;

    .passed & {
        background-color: #179f96;
    }

    span {
        position: absolute;
        color: white;
    }
}

<div class="gateuebersicht mb-4">

    <div id="idee">
        <div class="rectangle">
            <span class="mt-3 ml-3 r-center">Idee</span>
            <div class="rectangle-left">
                
            </div>
        </div>
    </div>

    <div id="gate-a" class="passed">
        <div class="gate">
            <div class="rectangle-left"></div>
            <div class="gate-middle">
                <span class="mt-3 ml-3  r-center">A</span>
            </div>
            <div class="rectangle-right"></div>
        </div>
    </div>

    <div id="vorprojekt">
        <div class="rectangle">
            <span class="mt-1 ml-4  r-center">Vorprojekt / Initialisierung</span>
            <div class="rectangle-right"></div>
            <div class="rectangle-left"></div>
        </div>
    </div>

    <div id="gate-b">
        <div class="gate">
            <div class="rectangle-left"></div>
            <div class="gate-middle">
                <span class="mt-3 ml-3  r-center">B</span>
            </div>
            <div class="rectangle-right"></div>
        </div>
    </div>

    <div id="konzept">
        <div class="rectangle">
            <span class="mt-1 ml-4  r-center">Konzept / MVP </span>
            <div class="rectangle-right"></div>
            <div class="rectangle-left"></div>
        </div>
    </div>

    <div id="gate-c">
        <div class="gate">
            <div class="rectangle-left"></div>
            <div class="gate-middle">
                <span class="mt-3 ml-3  r-center">C</span>
            </div>
            <div class="rectangle-right"></div>
        </div>
    </div>

    <div id="realisierung">
        <div class="rectangle">
            <span class="mt-3 ml-4  r-center">Realisierung</span>
            <div class="rectangle-right"></div>
        </div>
        <div class="rectangle-end"></div>
    </div>

    <div id="einfuehrung">
        <div class="rectangle">
            <span class="mt-3 ml-4  r-center">Einführung</span>
            <div class="rectangle-right"></div>
            <div class="rectangle-left"></div>
        </div>
    </div>

    <div id="gate-d">
        <div class="gate">
            <div class="rectangle-left"></div>
            <div class="gate-middle">
                <span class="mt-3 ml-3 r-center">D</span>
            </div>
            <div class="rectangle-right"></div>
        </div>
    </div>

    <div id="betrieb">
        <div class="rectangle">
            <span class="mt-3 ml-4 r-center">Betrieb</span>
            <div class="rectangle-right"></div>
        </div>
        <div class="rectangle-end"></div>
    </div>

</div>

Hmm interesting, when I to the same the text is centered in the middle of the whole screen instead of the middle of the div — xeraphim, Jan 21 '22 at 12:01
You need to add position relative to rectangle and gate in css — prograk, Jan 21 '22 at 12:06

Horizontally and vertically center span in css graphic with divs

1 Answers1