Wieder so eine zentrierungs-Frage

[stobi_de]

https://www.verlag-profutura.de/

Morgähn!
Ganz unten im Fuß ist da noch eine Navi drin.
Wie bekomme ich die denn auf dem Handy zentriert?
Align-self-center klappt da nicht.

Ich habe immer die gleichen Fragen - sonderbar.

Frank

[Tommy Herrmann]

Hmm,

gute Frage - das geht so (glaube ich) nicht, denn die Navi hat ja feste Abstände und da wird dann immer der Umbruch vorne beginnen.

Ich gucke mir das mal an ...

[Tommy Herrmann]

Ja - ich meine, dass die bereits zentriert ist aber durch das margin-right von 50px:

margin: 0 50px 10px 0;

wird ja der Abstand gehalten. Setzt Du das runter kann man es erkennen. Dennoch wird es eben daher nie als eine Reihe zentriert stehen können. Dann dürfte die gesamte Navi nicht breiter als das Display am Handy sein. Deswegen macht man dann ja normalerweise ein Hamburger-Menü. Zumindest fällt mir dazu gerade nix ein ...

Code: Alles auswählen

.nav-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  .list {
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
    .item-wrap {
      position: relative;
      margin: 0 50px 10px 0;
      cursor: pointer;
      &:hover, &:focus {
        &::before {
          width: 100%;
        }
      }
      &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        background-color: @active;
        transition: all .3s ease;
      }
    }
  }
}

[Tommy Herrmann]

In diesem zusätzlichen Versuch kann man gut erkennen, was ich meine. Ich habe dort die zusätzliche Navigation mal ohne die Mobirise-CSS als Textlinks eingetragen und bewusst die Links umbrechen lassen. Nur so passen sie in eine Zeile und sind dann auch zentriert:

Code: Alles auswählen

.myclass {
  display: inline-flex;
}
.mymargin {
  margin-right: 20px;
  margin-left: 20px;
}

Code: Alles auswählen

            <div class="col-12 col-lg-7 card" mbr-if="showNav || showButtons">
                <div class="nav-wrapper">
                    <ul class="list mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".list, .item-wrap" data-multiline mbr-article mbr-if="showNav">
                        <li class="item-wrap">Home</li>
                        <li class="item-wrap">About</li>
                        <li class="item-wrap">Products</li>
                        <li class="item-wrap">Pricing</li>
                    </ul>
                    <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove">
                        <a class="btn btn-primary" href="https://mobiri.se" data-app-placeholder="Type Text">
                            Contact Now
                        </a>
                    </div>
                </div>
                
                <div class="myclass">
                    <p class="mymargin">Home</p>
                    <p class="mymargin">About</p>
                    <p class="mymargin">Products</p>
                    <p class="mymargin">Pricing</p>
                </div>   
                
            </div>

[stobi_de]

Dann werde ich es einfach als Text-Links einbauen.
Genaugenommen schaut da unten ja sowieso keiner rein

[Tommy Herrmann]

ja - aber dann sollte wohl jeder Link mit einer neuen Zeile beginnen, nur so bekommst Du das zentriert.