Jesse21
Cadet 4th Year
- Registriert
- Apr. 2015
- Beiträge
- 90
Habe heute aus Spaß mit html und css angefangen komme jetzt aber irgendwie nicht weiter,
folgendes Problem: Habe ein relativ einfaches Grid erstellt und wollte jetzt den text "Content1" vertikal zentrieren, bekomme das aber irgendwie nicht so ganz hin
Jesse
HTML:
CSS:
folgendes Problem: Habe ein relativ einfaches Grid erstellt und wollte jetzt den text "Content1" vertikal zentrieren, bekomme das aber irgendwie nicht so ganz hin
justify-content: center; und align-items: center; habe ich schon ausprobiert funktionieren aber irgendwie nicht. Laut https://www.mediaevent.de/css/grid-align.html soll es aber so gehen. Wäre für einen Gedankenanstoß sehr frohJesse
HTML:
HTML:
<body>
<div class="container">
<nav>Navbar</nav>
<main>Main</main>
<div id="contentleft">
<div id="textleft">Content1</div>
</div>
<div id="contentright">
<div id="textright">Content1</div>
</div>
<footer>Footer</footer>
</div>
</body>CSS:
CSS:
* {margin: 0; padding: 0;}
.container{
display: grid;
height: 100vh;
grid-template-columns: 0.01fr 1fr 0.01fr;
grid-template-rows: 0.1fr 1fr 0.1fr;
grid-template-areas:
"nav nav nav"
"contentleft main contentright"
"footer footer footer";
grid-gap: 0.0rem;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
color: black;
text-align: center;
}
nav {
grid-area: nav;
background: green;
}
main {
grid-area: main;
background: red;
}
#contentleft {
grid-area: contentleft;
background: yellow;
}
#textleft {
transform: rotate(-90deg);
}
#contentright {
grid-area: contentright;
background: orange;
}
#textright {
transform: rotate(90deg);
}
footer {
grid-area: footer;
background: blue;
}
