How I can make the image to be centered vertically on the left and the text on the right ?
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
color: #444;
margin-top: 150px;
justify-content: center;
}
.pricing1box-div {
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<br>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
You can use grid properties on the image and text, as well. Just make the parent a grid container.
.pricing1box {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
color: #444;
}
.pricing1box-div {
display: grid; /* new; nested grid container */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
background-color: orange;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.pricing1box-div img {
grid-column: 1;
grid-row: 1 / -1; /* from first line at start, to first line at end */
align-self: center; /* vertical centering */
width: 100px;
}
.pricing1box-div :not(img) {
grid-column: 2;
}
<div class="pricing1box">
<div class="pricing1box-div">
<img src="http://placehold.it/350x150.png">
<h6 style="color: black; padding: 10px;">Title</h6>
<p style="font: 10px blue;">Powered by me</p>
<p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p>
</div>
</div>
You can also mix flex & grid for readability
body {
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
justify-content: center;
align-content: bottom;
}
div {
display:flex;
align-items: center; /* Vertical center of image & text */
background-color: orange;
}
p {
padding: 100px 10px; /* Demo stuff */
}
<div>
<img src="//placecage.com/100/100">
<p>text here</p>
</div>
Try this:
position: relative;
top: 50%;
transform: translateY(-50%);
or maybe you just need this: align="middle"
<img src="http://placehold.it/350x150.png" align="middle" style="float: left; display: inline-block; width: 100px; vertical-align: middle;">
Related
I am trying to create an UI with components arranged in the order as shown in the picture?
I am building a Material UI Dialog in React application with the following design proposal.
I am trying to flex box. I tried using the concepts as in the https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax#the_flex-grow_property
but I am not able to achieve the result. Can the components be arranged as in the picture otherwise I will have to ask my client to reconsider the design decision which I am not sure will be possible but before I want to confirm the design possibility.
If it is possible to achieve, can anyone please give me a lead?
This is a solution for the template you showed but using the grid template instead of flex.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
font-family: sans-serif;
font-size: 20px;
}
.container{
--gap: .20rem;
display: grid;
grid-template-columns: minmax(200px, auto) repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: var(--gap);
padding: var(--gap);
height: 100vh;
}
.container > *{
border: solid 1px darkgray;
display: block;
background: lightgray;
}
.side{
grid-row: span 3;
}
.header, .footer{
grid-column: span 3;
}
.box{
display: flex;
align-items: center;
justify-content: center;
}
/* Demo content */
.side::before,
.header::before,
.footer::before
{
color: #444;
font-size: 1rem;
padding: 0 .5em;
border-bottom: solid 1px #777;
display: block;
}
.side::before{
content: 'sidebar';
}
.header::before{
content: 'header';
}
.footer::before{
content: 'footer';
}
.container > .box:nth-child(3)::before{
height: 70%;
/*content: attr(data-height);*/ /*I wished it worked but it didn't*/
}
.container > .box:nth-child(4)::before{
height: 40%;
}
.container > .box:nth-child(5)::before{
height: 90%;
}
.box::before{
color: #ccc;
background: red;
border: solid 1px darkred;
width: 100%;
display: block;
content: '';
text-align: center;
padding: .2em 1em;
font-size: .8rem;
content: 'height: ' attr(data-height);
}
<div class="container">
<div class="side"></div>
<div class="header"></div>
<div class="box" data-height="70%"></div>
<div class="box" data-height="40%"></div>
<div class="box" data-height="90%"></div>
<div class="footer"></div>
</div>
It is definitely possible with Flexbox. Here is an example:
.block {
border: 2px solid black;
padding: 8px;
}
.container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 8px;
}
.first-column {
width: 100px;
}
.second-column {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.second-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.second-row>* {
flex-grow: 1;
}
.third-row {
text-align: center;
}
<div class="block container">
<div class="block first-column">
row 1
</div>
<div class="second-column">
<div class="block">
row 1
</div>
<div class="second-row">
<div class="block">
row 2
<br /> row 2
<br /> row 2
</div>
<div class="block">
row 2
<br /> row 2
</div>
<div class="block">
row 2
</div>
</div>
<div class="block third-row">
row 3
<br />
<br />
<br /> row 3
</div>
</div>
</div>
I would like to center my post title between two navigation buttons.
On small screens, I want the navigation buttons to be together at the top, and for the title to wrap below.
Desired result on large screens:
Desired result on small screens:
The post title, date, and tags are contained in one flex-grow div.
#post-head {
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
background-color: #col-3-1;
margin-left: -1vw;
margin-right: -1vw;
}
#post-meta {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
font-family: maven;
font-weight: 700;
// background: linear-gradient(lighten(#col-3-1, 10) 0%, #col-3-1 20%);
}
#post-title {
font-size: 40px;
margin-top: 10px;
color: white;
}
#post-date {
font-size: 24px;
color: fade(white, 80);
}
#post-tags {
padding: 15px;
font-weight: 300;
}
#post-tags>div {
display: inline-block;
padding: 3px 12px 3px 12px;
background-color: fade(black, 20);
border-radius: 15px;
border: 1px solid fade(white, 20);
}
#post-nav {
display: flex;
justify-content: space-between;
}
#post-nav>div {
display: inline-block;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid white;
padding: 10px;
margin-left: 20px;
margin-right: 20px;
min-width: 120px;
}
<div id="post-head">
<div id="post-nav">
<div>
< Previous Post</div>
<div>Next Post ></div>
</div>
<div id="post-meta">
<div id="post-title">Post Title</div>
<div id="post-date">12 July, 2022</div>
<div id="post-tags">
<div>Tag 1</div>
<div>Tag 2</div>
</div>
</div>
</div>
</div>
I had to adjust quite a lot - both HTML and CSS - to make it work the way you want so I suggest you dig into the details.
Essential is the use of a media query to separate small screen styles from large screen styles an the order property for flex items. You can find more about media queries here
#post-head {
display: flex;
align-items: stretch;
position: relative;
background-color: #col-3-1;
margin-left: -1vw;
margin-right: -1vw;
flex-wrap: wrap;
}
#post-meta {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
font-family: maven;
font-weight: 700;
width: 100vw;
}
#post-title {
font-size: 40px;
margin-top: 10px;
}
#post-date {
font-size: 24px;
color: fade(white, 80);
}
#post-tags {
padding: 15px;
font-weight: 300;
}
#post-tags>div {
display: inline-block;
padding: 3px 12px 3px 12px;
background-color: fade(black, 20);
border-radius: 15px;
border: 1px solid fade(white, 20);
}
#post-head {
display: flex;
justify-content: space-between;
}
#post-head>div:nth-child(1),
#post-head>div:nth-child(2) {
display: flex;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid white;
padding: 10px;
margin-left: 20px;
margin-right: 20px;
min-width: 120px;
width: 120px;
max-height: 30px;
justify-content: center;
align-items: center;
}
#media (min-width: 900px) {
#post-meta {
width: initial;
}
#post-head {
flex-wrap: no-wrap;
}
#post-previous {
order: 1;
}
#post-next {
order: 3;
}
#post-meta {
order: 2;
}
}
<div id="post-head">
<div id="post-previous">< Previous Post</div>
<div id="post-next">Next Post ></div>
<div id="post-meta">
<div id="post-title">Post Title</div>
<div id="post-date">12 July, 2022</div>
<div id="post-tags">
<div>Tag 1</div>
<div>Tag 2</div>
</div>
</div>
</div>
I have done by using CSS Grid.
body{
background-color:#42243C;
color:white;
}
#post-nav{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 2fr;
text-align:center;
}
.prev, .next{
text-align:center;
border:1px solid black;
}
.prev{
margin-left:20px;
}
.next{
margin-right:20px;
}
#post-tags{
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:5px;
}
.t1{
text-align:right;
}
.t2{
text-align:left;
}
#media only screen and (max-width: 650px) {
#post-meta{
grid-row:2/3;
grid-column:1/3;
}
#post-nav{
display:grid;
grid-template-columns:1fr 1fr;
text-align:center;
justify-self:center;
grid-column-gap:20px;
grid-row-gap:10px;
}
}
<div id="post-head">
<div id="post-nav">
<div class="prev"> < Previous Post</div>
<div id="post-meta">
<div id="post-title">Post Title</div>
<div id="post-date">12 July, 2022</div>
<div id="post-tags">
<div class="t1">Tag 1</div>
<div class="t2">Tag 2</div>
</div>
</div>
<div class="next">Next Post ></div>
</div>
</div>
Between the helpful answers given by Arman and Gerard, I was able to get what I want!
I think a grid layout is definitely the better option here. The key was to set the grid-template-rows property to auto 0fr to prevent extra space being reserved in the grid. Also, I increased the number of columns so that it can be evenly divided when the navigation buttons are put on a new row.
#post-head{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-template-rows:auto 0fr;
text-align:center;
}
.post-nav.prev{
grid-column:1/2;
}
.post-nav.next{
grid-column:4/5;
}
#post-meta{
grid-row: 1/2;
grid-column:2/4;
}
#media only screen and (max-width: 650px) {
#post-meta{
grid-row:2/3;
grid-column: 1/5;
}
.post-nav.prev{
grid-column:1/3;
}
.post-nav.next{
grid-column:3/5;
}
}
<div id="post-head">
<div class="post-nav prev">< Previous Post</div>
<div id="post-meta">
<div id="post-title">Post Title</div>
<div id="post-date">12 July, 2022</div>
</div>
<div class="post-nav next">Next Post ></div>
</div>
I have a simple web page with a header, a content section and a footer. My content section has uses css grid. I want the content to take up all of the space between the header and the footer with the header and footer always visible on the page. I find that with no images, this works. I can resize the screen and the footer is always visible.
However, after adding tags within the grid divs, the footer is pushed off the page.
Here is a JS Fiddle with no images:
https://jsfiddle.net/7p3mbquk/
Here is a JS fiddle with images
https://jsfiddle.net/Lrm8gbue/4/
Notice how when you reduce the width of the screen, the footer gets pushed down below the window.
Brett Donald offered a solution below that works in chrome.
Why does it not work the same in Safari v14.1.2?
In this image, I have the site running in safari on the left hand side and Chrome v96.0 in the right hand side.
Here is my CSS...
body {
margin: 0;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 99vh;
}
.header {
flex-basis: 10px;
grid-area: header;
display: flex;
justify-content: space-between;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
height: 100%;
}
.footer {
flex-basis: 10px;
grid-area: footer;
display: flex;
justify-content: flex-start;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
height: 100%;
}
.content {
flex-basis: 1 0 1fr;
height: 100%;
align-self: top;
grid-area: content;
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
}
.content .description {
text-align: center;
font-size: clamp(1rem, 3vw, 2rem);
font-family: verdana;
/* text-shadow: 2px 2px white; */
padding: 1rem;
}
.oval {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
background-color: #ccc;
border: 5px solid black;
border-radius: 100px / 100px;
box-shadow: 2px 2px white;
margin: 1rem 1rem;
}
.content > .photos {
flex-grow: 4;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 1fr);
align-content: center;
align-content: stretch;
}
#media (min-width: 700px) {
.content > .photos {
grid-template-columns: repeat(3, 1fr);
}
}
#media (min-width: 800px) {
.content > .photos {
grid-template-columns: repeat(4, 1fr);
}
}
.content > .photos > div {
background-color: yellow;
border: 1px solid black;
justify-content: center;
}
.content > .photos img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
Here is my markdown
<head>
<link rel="stylesheet" href="./main.css" />
<script type="module" src="./main.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<p class="coname">Momo's Surf School</p>
<p class="contact">Contact</p>
</div>
<div class="content">
<div class="oval">
<div class="description">
Make your holiday amazing with a fun, relaxing day learning to surf
with Mo!
</div>
</div>
<div class="photos">
<div><img src="./assets/woman.jpg" /></div>
<div><img src="./assets/women.jpg" /></div>
<div><img src="./assets/man.jpg" /></div>
<div><img src="./assets/woman3.jpg" /></div>
<div><img src="./assets/woman2.jpg" /></div>
<div><img src="./assets/waves.jpg" /></div>
<div><img src="./assets/twoBoys.jpg" /></div>
<div><img src="./assets/barrel.jpg" /></div>
</div>
</div>
<div class="footer"><p>Established 2013</p></div>
</div>
</body>
Your content div needs an overflow-y: scroll; rule. And I got rid of your flex-basis rules.
Is this the effect you are after?
body {
margin: 0;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
grid-area: header;
display: flex;
justify-content: space-between;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
}
.footer {
grid-area: footer;
display: flex;
justify-content: flex-start;
width: 100%;
color: white;
background-color: black;
padding: 0 1rem;
}
.content {
align-self: top;
grid-area: content;
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
overflow-y: scroll;
}
.content .description {
text-align: center;
font-size: clamp(1rem, 3vw, 2rem);
font-family: verdana;
/* text-shadow: 2px 2px white; */
padding: 1rem;
}
.oval {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
background-color: #ccc;
border: 5px solid black;
border-radius: 100px / 100px;
box-shadow: 2px 2px white;
margin: 1rem 1rem;
}
.content > .photos {
flex-grow: 4;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 1fr);
align-content: center;
align-content: stretch;
}
#media (min-width: 700px) {
.content > .photos {
grid-template-columns: repeat(3, 1fr);
}
}
#media (min-width: 800px) {
.content > .photos {
grid-template-columns: repeat(4, 1fr);
}
}
.content > .photos > div {
background-color: yellow;
border: 1px solid black;
justify-content: center;
line-height: 0;
}
.content > .photos img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
<body>
<div class="container">
<div class="header">
<p class="coname">Momo's Surf School</p>
<p class="contact">Contact</p>
</div>
<div class="content">
<div class="oval">
<div class="description">
Make your holiday amazing with a fun, relaxing day learning to surf
with Mo!
</div>
</div>
<div class="photos">
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
<div><img src="https://images.unsplash.com/photo-1443181994330-3e365ff8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8YmVhY2h8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60" /></div>
</div>
</div>
<div class="footer"><p>Established 2013</p></div>
</div>
</body>
.layout {
display: grid;
grid-template-columns: 1fr 11fr;
grid-auto-rows: minmax(100vh, auto);
}
.layout_menu {
height: 90vh;
grid-row: 0.3333333333;
}
.layout_menu-menu {
display: flex;
writing-mode: vertical-rl;
overflow: auto;
max-height: 75vh;
align-items: flex-start;
}
.layout_menu-menu-link {
padding: 2rem 0rem;
font-size: large;
}
.layout_menu-menu-link a {
color: #dff0e5;
text-decoration: none;
}
.layout_menu-menu-link a:hover {
color: #696969;
}
.layout_menu-logo {
width: 5rem;
height: 5rem;
margin: 1rem 0rem;
}
.cont {
border: greenyellow 1px solid;
}
<div class="layout">
<div class="layout_menu">
<img class="layout_menu-logo" src="assets/H_logo.png" alt="H Logo" />
<div class="layout_menu-menu">
<div class="layout_menu-menu-link">page1</div>
<div class="layout_menu-menu-link">page2</div>
<div class="layout_menu-menu-link">page3</div>
<div class="layout_menu-menu-link">page4</div>
<div class="layout_menu-menu-link">page5</div>
</div>
</div>
<div class="layout_main cont">
</div>
</div>
I need to use the grid to arrange the layout on my page.
below is my CSS and HTML code.
.layout{
display: grid;
grid-template-columns: 1fr 11fr;
grid-auto-rows: minmax(100vh, auto);
&_menu{
height: 90vh;
grid-row: 1/3;
#include for-size(phone-only){
display: flex;
margin-left: 0rem;
}
&-menu{
display: flex;
writing-mode: vertical-rl;
overflow: auto;
max-height: 75vh;
align-items: flex-start;
&-link{
padding: 2rem 0rem;
font-size: large;
#include for-size(phone-only){
padding: 0.2rem;
font-size: large;
}
a{
color: #DFF0E5;
text-decoration: none;
&:hover{
color: #696969;
}
}
}
#include for-size(phone-only){
writing-mode: horizontal-tb;
}
}
&-logo{
width: 5rem;
height: 5rem;
margin: 1rem 0rem;
#include for-size(phone-only){
margin: 0rem;
}
}
}
}
.cont{
border: greenyellow 1px solid;
}
<div class="layout">
<div class="layout_menu">
<img class="layout_menu-logo" src="assets/H_logo.png" alt="H Logo"/>
<div class="layout_menu-menu">
<div class="layout_menu-menu-link">page1</div>
<div class="layout_menu-menu-link">page2</div>
<div class="layout_menu-menu-link">page3</div>
<div class="layout_menu-menu-link">page4</div>
<div class="layout_menu-menu-link">page5</div>
</div>
</div>
<div class="layout_main cont">
</div>
</div>
I don't understand why is total screen height so much higher than 100vh even when I don't have content.
I want the page to end just with the green border. Can anyone help me understand the cause of this?
SS after scrolling halfway to the page
I've looked everywhere (for days..) but couldn't find a solution working for me so here I am..
I've created some sort of square, divided in 4 div, squares I all want responsive.
Here is a drawing
As I can't set any div heigh, I can't get the text of the "text-slider" and "text-produits" div in the center. Does anybody know how to do this ? Thank in advance!
.slider {
display: table;
width: 100vw;
margin-left: calc(-50vw + 50%);
height: 100%;
justify-content: center;
position: relative;
}
.slider-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.produits {
display: table;
width: 100vw;
margin-left: calc(-50vw + 50%);
height: auto;
justify-content: center;
vertical-align: middle;
text-align: center;
position: relative;
}
#media screen and (min-width: 850px) {
.text-slider {
display: table-cell;
width: 30%;
vertical-align: middle;
text-align: center;
}
.grid-cuisine {
display: table-cell;
justify-content: center;
align-items: center;
position: relative;
width: 45%;
}
.grid-produits {
display: table-cell;
width: 30%;
justify-content: center;
}
.text-produits {
display: table-cell;
width: 45%;
vertical-align: middle;
text-align: left;
padding: auto;
}
}
<div class="row slider d-flex justify-content-center" id="photos">
<div class="text-slider">
<div>
Nunc euismod eget...
</div>
</div>
<div class="grid-cuisine">
<div class="slider-wrapper">
...
</div>
</div>
</div>
<div class="row produits d-flex justify-content-center" id="produits">
<div class="grid-produits">
<img src="images/combo-alpha.svg" alt="..." class="image-produits">
</div>
<div class="text-produits">
Lorem ipsum dolor...
</div>
</div>
You can use flexbox for this - I have commented css below:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row; /* align children in rows */
flex-wrap: wrap; /* allow wrapping of children for multiple rows */
width: 50%; /* change to width you want */
margin: 0 auto;
border-left: 5px solid black;
border-bottom: 5px solid black;
}
.container>div {
border-right: 5px solid black;
border-top: 5px solid black;
padding:20px;
display:flex; /* make children flex too for centering */
align-items:center; /* vertical center */
justify-content:center; /* horizontal center */
}
.left-col {
width: 30%;
}
.right-col {
width: 70%;
}
<div class="container">
<div class="left-col">
top left content over multiple lines
</div>
<div class="right-col">
top right
</div>
<div class="left-col">
bottom left content over multiple lines
</div>
<div class="right-col">
bottom right
</div>
</div>
Grid + Flex
html, body {
margin: 0;
height: 100%
}
.grid-container * {
border: 1px solid #ccc;
}
.grid-container div {
display: flex;
justify-content: center;
align-items: center
}
.grid-container div:after {
content: attr(class);
color: #888;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: arial;
}
.grid-container {
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: '. .' '. .';
}
<div class='grid-container'>
<div>Text Slider</div>
<div>Grid-cuisine</div>
<div>Grid Produits</div>
<div>Text-produits</div>
</div>