.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
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>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Question: how to make that 1 column is center and after it rest of the columns.
Now the whole grid is centered
Use margin-left: calc(50% - 40%); on flex-container. This way it is always dynamic with the calc. Then you can set width: 10%; on your flex-item's.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: calc(50% - 40%);
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
width: 10%;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
I got another solution for you ..
Here is without gap. You can play with width to resize boxes
.flex-item{
width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
background-color: bisque;
display: grid;
place-content: center;
overflow:hidden;
}
.container{
width: 100vw;
height: 10rem;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.half-container{
grid-column: 1;
border: 1px solid black;
}
.flex-container {
grid-column: 2;
display: grid;
grid-template-columns: repeat(4,1fr);
/* gap: 1rem; */
align-items: center;
justify-content: center;
position: relative;
}
.flex-item {
background: tomato;
height: 100px;
width: 100%;
display: grid;
place-content: center;
transform: translate(-50%);
}
.flex-item p{
color: white;
font-weight: bold;
font-size: 3em;
}
.flex-item::before{
position: absolute;
content: "";
width: 50%;
height: 100%;
border-right: 1px solid black;
}
<div class="container">
<div class="half-container"></div>
<div class="flex-container">
<div class="flex-item">
<p>1</p>
</div>
<div class="flex-item">
<p>2</p>
</div>
<div class="flex-item">
<p>3</p>
</div>
<div class="flex-item">
<p>4</p>
</div>
</div>
</div>
Here is with gap
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
background-color: bisque;
display: grid;
place-content: center;
overflow:hidden;
}
.container{
width: 100vw;
height: 10rem;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.half-container{
grid-column: 1;
border: 1px solid black;
}
.flex-container {
grid-column: 2;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 2rem;
align-items: center;
justify-content: center;
position: relative;
}
.flex-item {
background: tomato;
height: 100px;
width: 100%;
display: grid;
place-content: center;
transform: translate(-50%);
}
.flex-item p{
color: white;
font-weight: bold;
font-size: 3em;
}
.flex-item::before{
position: absolute;
content: "";
width: 50%;
height: 100%;
border-right: 1px solid black;
}
<div class="container">
<div class="half-container"></div>
<div class="flex-container">
<div class="flex-item">
<p>1</p>
</div>
<div class="flex-item">
<p>2</p>
</div>
<div class="flex-item">
<p>3</p>
</div>
<div class="flex-item">
<p>4</p>
</div>
</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>
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;">