Seite 1 von 1
Wieder so eine zentrierungs-Frage
Verfasst: Di 9. Jul 2024, 08:16
von 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
Re: Wieder so eine zentrierungs-Frage
Verfasst: Di 9. Jul 2024, 09:20
von 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 ...
Re: Wieder so eine zentrierungs-Frage
Verfasst: Di 9. Jul 2024, 09:32
von 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;
}
}
}
}
Re: Wieder so eine zentrierungs-Frage
Verfasst: Di 9. Jul 2024, 09:50
von 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>
Re: Wieder so eine zentrierungs-Frage
Verfasst: Di 9. Jul 2024, 09:58
von stobi_de
Dann werde ich es einfach als Text-Links einbauen.
Genaugenommen schaut da unten ja sowieso keiner rein
Re: Wieder so eine zentrierungs-Frage
Verfasst: Di 9. Jul 2024, 10:01
von Tommy Herrmann
ja - aber dann sollte wohl jeder Link mit einer neuen Zeile beginnen, nur so bekommst Du das zentriert.