I want to create template contains :
On the left : Have a image
On the right: Have 4 buttons
My examlple :
What can I do to create that design with HTMl & CSS ?
Thank you .
Try using display:flex; and display:grid; to do this. This is a sample code. Hope it helps
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.button-container {
display: grid;
grid-template-columns: 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.button {
border: 1px solid;
border-radius: 4px;
padding: 5px 5px;
text-align: center;
}
.image {
margin-right: 1rem;
}
<div class="d-flex flex-row align-items-center justify-content-center">
<img class="image" src="https://via.placeholder.com/150">
<div class="button-container">
<div class="button">
Button 1
</div>
<div class="button">
Button 2
</div>
<div class="button">
Button 3
</div>
<div class="button">
Button 4
</div>
</div>
</div>
EDIT: I have added media queries and shortened the css code in this snippet so that the button will be shown below the image in smaller screens
.main-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.button-container {
display: grid;
grid-template-columns: 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.button {
border: 1px solid;
border-radius: 4px;
padding: 5px 5px;
text-align: center;
}
.image {
margin-right: 1rem;
}
#media (min-width: 320px) and (max-width: 480px) {
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.image {
margin-right: 0;
margin-bottom: 1rem;
}
}
<div class="main-container">
<img class="image" src="https://via.placeholder.com/150">
<div class="button-container">
<div class="button">
Button 1
</div>
<div class="button">
Button 2
</div>
<div class="button">
Button 3
</div>
<div class="button">
Button 4
</div>
</div>
</div>
*{ margin: 0px; padding: 0px; box-sizing: border-box; }
.img_box_btn {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
align-items: center;
box-sizing: border-box;
}
.img_box_btn .left {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
padding: 0 15px;
}
.img_box_btn img {
max-width: 100%;
}
.img_box_btn .right {
padding: 0 15px;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
ul.list-btn-box {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
list-style: none;
}
ul.list-btn-box li {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 15px;
padding: 0px 15px;
}
.img_box_btn * {
box-sizing: border-box;
}
ul.list-btn-box li .btn-cus {
padding: 12px 20px;
display: block;
background-color: #000;
color: #ffff;
border: 1px solid #000;
font-size: 13px;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.img_box_btn .left,.img_box_btn .right {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
padding: 15px 15px;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>responsive image and four buttons</title>
</head>
<body>
<div style="max-width: 800px; margin: 15px auto; padding: 0 15px;">
<div class="img_box_btn">
<div class="left">
<img src="https://via.placeholder.com/450">
</div>
<div class="right">
<ul class="list-btn-box">
<li><button class="btn-cus">button 01</button></li>
<li><button class="btn-cus">button 02</button></li>
<li><button class="btn-cus">button 03</button></li>
<li><button class="btn-cus">button 04</button></li>
</ul>
</div>
</div>
</div>
</body>
</html>
There are a lot of things that can be done. However, I've used bootstrap to make things simple. Please review the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Sample Project</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-12 img-col">
<img src="https://previews.123rf.com/images/iqoncept/iqoncept1406/iqoncept140600148/29496890-case-study-words-in-a-circle-or-round-stamp-with-red-ink-to-symbolize-a-business-example-or-anecdote.jpg" alt="sample" class="image">
</div>
<div class="col-lg-8 col-sm-12 btn-col">
<div class="row row-1">
<div class="col-md-6">
<button>
BTN-1
</button>
</div>
<div class="col-md-6">
<button>
BTN-2
</button>
</div>
</div>
<div class="row row-2">
<div class="col-md-6">
<button>
BTN-3
</button>
</div>
<div class="col-md-6">
<button>
BTN-4
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS for the same:
.img-col, .btn-col {
border: 2px solid black;
}
.row .img-col {
text-align: center;
}
.img-col .image {
width: 30%;
height: auto;
}
.btn-col {
text-align: center;
padding-top: 2%;
}
.btn-col .row-1{
margin-bottom: 5px;
}
This will make it look like this:
Related
margin-top on the button itself may be the answer but it feels wrong to me. If it is hopefully an answer will confirm. What is the best solution to lower the button a smidgen?
The codepen for extra context: https://codepen.io/AdanRod133/full/WNZEYJX
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 115px;
grid-row-gap: 1em;
justify-content: space-around;
align-items: center;
width: 50%;
height: 100px;
padding: 10px;
}
img {
width: 100%;
height: 100%;
background-color: #2D8C9E;
}
.btn-learn {
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
I have wrapped your button in a flex container and used its property align-items: center
There were also some styling changes I have made
you have made three column in grid with 100px 300px and 100px
but assigned the button with width: 125px that will make the styling error
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="button-container">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
body{
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 125px;
grid-row-gap: 1em;
justify-content: space-between;
align-items: center;
width: 40%;
height: 90px;
padding: 5px 20px;
}
img{
width: 100%;
height: 100%;
background-color: #2D8C9E;
}
.btn-learn{
/* justify-self: center; */
/* align-self: center; */
height: 40px;
border: none;
border-radius: 10px;
width: 100%;
/* margin-top: 16px; */
}
.body-title{
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body{
font-size: 16px;
grid-column: 3 / 5;
}
.button-container
{
height: 100%;
margin: 0;
padding: 0;
display: flex;
align-items:center
}
You should restructure your div in a better way. For example, I think you are looking for content box like this:
I would suggest you to use Bootstrap if you are new to front-end web development.
Here is an example of how your Bootstrap-5 code looks.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<style>
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
width: 100%;
height: 100%;
background-color: #2d8c9e;
}
.btn-learn {
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2">
<img src="" alt="" />
</div>
<div class="col-8">
<h3 class="body-title">Startup</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="col-2 d-flex flex-column justify-content-center">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Here is the css file .
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: coral;
display: flex;
flex-wrap:no-wrap;
justify-content: space-between;
align-items: center;
width: 80%;
height: 100px;
padding: 10px;
}
img {
width: 100px;
height: 100px;
background-color: #2D8C9E;
}
.content {
padding:0% 2%;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
.btn-learn {
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
And html file like this
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">
Create Websites Online using the Startup Boostrap 5 builder
</p>
</div>
<button class="btn btn-learn">
Learn More
<i class="fas fa-arrow-right"></i>
</button>
</div>
Here is the result: https://codepen.io/AdanRod133/full/WNZEYJX
.btn-learn{
position: relative;
height: 40px;
border: none;
border-radius: 5px;
background-color: #00A57F;
color: #D8D7DF;
height: 2.5em;
padding: 10px 25px;
outline: none;
cursor: pointer;
display: inline-block;
justify-self: end;
transition: all .2s ease-in-out;
}
I got rid of the width and set the button to inline-block. Then added some padding.
I wanted to make something css-grid only in order to get more practice in.
Working with the padding as well as adding grid gap allowed the items to
sit where I wanted them to.
I can't seem to be able to get my page to display fully (it simply stays on top). I tried doing .html{margin +height} or doing just .body{margin height}, as well as combining them, or adding flex box to the CSS class and nothing seems to work. It looks like this:
.body,
.html {
margin: 0%;
height: 100%;
}
#nav {
display: flex;
justify-content: flex-end;
margin: top 15px;
}
a {
margin-right: 20px;
}
#nav.topimage {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
#nav.toplink {
width: 20px;
height: 20px;
}
#middle {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#logo {
text-align: center;
margin: top 300px;
}
#searchbarcontainer {
margin-top: 20px;
text-align: center;
}
#searchbar {
padding-top: 20px;
padding-bottom: 20px;
outline: 0;
width: 500px;
border-radius: 10px;
border: 2px solid chocolate;
}
#buttons {
margin-top: 30 pixels;
display: flex;
justify-content: center;
}
.button {
margin-left: 10px;
margin-right: 10px;
padding: 5px 10px;
cursor: pointer;
background: rgb(224, 224, 224);
border-radius: 3px;
}
#links {
text-align: center;
}
.body {
display: flex;
flex-direction: column-gap;
}
#footer-content {
background: rgb(221, 27, 27);
border-top: 1px solid blanchedalmond;
}
<!DOCTYPE html>
<html>
<head>
<title>google clone</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
<a class="toplink">gmail</a>
<a class="toplink">image</a>
<a class="topimage">xxx</a>
</div>
<div id="middle">
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
<div id="searchbarcontainer">
<input id="searchbar" type="text">
</div>
<div id="buttons">
<div class="button">
Google Search
</div>
<div class="button">
I am feeling lucky
</div>
</div>
<div id="links">
Google is offered in X
</div>
</div>
<div id="footer">
<div id="footer-content">
</div>
<a>xxx</a>
</div>
</div>
</body>
</html>
Nothing seems to work and I don't know if it has something to do with flex or my html.
See if this works. Run the snippet
If it works just copy my code and look at the adjustments i have made to your code.
.body,
.html {
margin: 0;
height: 100vh;
box-sizing: border-box;
}
section {
height: 100vh;
}
#middle-container{
height: 100%;
display:flex;
flex-direction: column;
justify-content:center;
}
#nav {
display: flex;
justify-content: flex-end;
padding-top: 15px;
}
a {
margin-right: 20px;
}
#nav.topimage {
width: 20px;
background: red;
border-radius: 50%;
}
#nav.toplink {
width: 20px;
}
#middle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#searchbarcontainer {
margin-top: 20px;
text-align: center;
}
#searchbar {
padding-top: 20px;
padding-bottom: 20px;
outline: 0;
width: 500px;
border-radius: 10px;
border: 2px solid chocolate;
}
#buttons {
margin-top: 30 pixels;
display: flex;
justify-content: center;
}
.button {
margin-left: 10px;
margin-right: 10px;
padding: 5px 10px;
cursor: pointer;
background: rgb(224, 224, 224);
border-radius: 3px;
}
#links {
text-align: center;
}
#footer-content {
background: rgb(221, 27, 27);
border-top: 1px solid blanchedalmond;
}
<!DOCTYPE html>
<html>
<head>
<title>google clone</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<section class="main">
<div id="nav">
<a class="toplink">gmail</a>
<a class="toplink">image</a>
<a class="topimage">xxx</a>
</div>
<div id="middle-container">
<div id="middle">
<div id="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
<div id="searchbarcontainer">
<input id="searchbar" type="text">
</div>
<div id="buttons">
<div class="button">
Google Search
</div>
<div class="button">
I am feeling lucky
</div>
</div>
<div id="links">
Google is offered in X
</div>
</div>
</section>
<div id="footer">
<div id="footer-content">
</div>
<a>xxx</a>
</div>
</div>
</body>
</html>
Styles
body{
margin:unset;
}
.carousel{
height: 200px;
width: 100%;
padding: 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: 50px 1fr 50px;
grid-gap: 10px;
}
.carousel-controls{
color: navy;
}
.carousel > div{
display: grid;
align-items: center;
justify-content: center;
}
.carousel-holder{
background: purple;
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.carousel-cards{
background: white;
height: 100%;
width: 125px;
display: grid;
place-items:center;
font-weight: bolder;
color: navy;
}
Markup with bit of php for card generation
<div class="carousel">
<div class="carousel-controls carousel-controls-prev ">
<i class="fas fa-arrow-left"></i>
</div>
<div class="carousel-holder">
<?php
$x = 1;
while ($x <= 250) {
echo "<div class='carousel-cards'>".$x."</div>";
$x++;
}
?>
</div>
<div class="carousel-controls carousel-controls-next ">
<i class="fas fa-arrow-right"></i>
</div>
</div>
The result
Problem
I am making a carousel to which Ill add javascript later. Now my problem is that the generated cards which should start from 1 are actually starting from 120 when I am using overflow hidden.
In regards to your content centering, in your css, it should be justify-content:start and not justify-content:center.
So, it should look like this:
.carousel > div{
display: grid;
align-items: center;
justify-content: start;
}
You can change your alignment to left if you want it to start at 1 rather than the center using:
.carousel-cards{
justify-content: left;
}
See it in action below:
body{
margin:unset;
}
.carousel{
height: 200px;
width: 100%;
padding: 10px;
box-sizing: border-box;
display: grid;
grid-template-columns: 50px 1fr 50px;
grid-gap: 10px;
}
.carousel-controls{
color: navy;
}
.carousel > div{
display: grid;
align-items: center;
justify-content: left;
}
.carousel-holder{
background: purple;
display: grid;
grid-gap: 10px;
grid-auto-flow: column;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.carousel-cards{
background: white;
height: 100%;
width: 125px;
display: grid;
place-items:center;
font-weight: bolder;
color: navy;
}
<div class="carousel">
<div class="carousel-controls carousel-controls-prev ">
<i class="fas fa-arrow-left"></i>
</div>
<div class="carousel-holder">
<div class='carousel-cards'>1</div>
<div class='carousel-cards'>2</div>
<div class='carousel-cards'>3</div>
<div class='carousel-cards'>4</div>
<div class='carousel-cards'>5</div>
<div class='carousel-cards'>6</div>
<div class='carousel-cards'>7</div>
<div class='carousel-cards'>8</div>
<div class='carousel-cards'>9</div>
<div class='carousel-cards'>10</div>
<div class='carousel-cards'>11</div>
<div class='carousel-cards'>12</div>
<div class='carousel-cards'>13</div>
<div class='carousel-cards'>14</div>
<div class='carousel-cards'>15</div>
<div class='carousel-cards'>16</div>
<div class='carousel-cards'>17</div>
<div class='carousel-cards'>18</div>
<div class='carousel-cards'>19</div>
<div class='carousel-cards'>20</div>
<div class='carousel-cards'>21</div>
<div class='carousel-cards'>22</div>
<div class='carousel-cards'>23</div>
<div class='carousel-cards'>24</div>
<div class='carousel-cards'>25</div>
</div>
<div class="carousel-controls carousel-controls-next ">
<i class="fas fa-arrow-right"></i>
</div>
</div>
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 1 year ago.
There is 6 items in navbar:
first 3 items should be aligned as flex-start - on beginning of navbar.
Then Logo should be in center of navbar
And on the end -> flex-end should come 2 icons
Here is screenshot of navbar current condition:
Problem: is position of Logo - am using margin-left: '27%'. And on different screen size logo is not aligned well.
I would like to align some how that logo trough flex, is there a way to do that with flex?
Check the code:
HTML/jsx:
<div className="container">
<header className="header">
<nav className="user-nav">
<div className="user-nav-item">
<Link href="/">
<a className="user-nav-item-link">Overview</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/search">
<a className="user-nav-item-link">Search</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/feed">
<a className="user-nav-item-link">Feed</a>
</Link>
</div>
<h3 className="logo">Logo</h3>
</nav>
<div className="user-nav-icon">
<div className="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div className="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
CSS:
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
.header {
display: flex;
align-items: center;
height: 5rem;
color: #fff;
background-color: black;
.user-nav {
width: 100%;
display: flex;
align-items: center;
&-item {
width: 5.5rem;
padding: 1.5rem;
cursor: pointer;
}
&-item-link {
text-decoration: none;
color: white;
}
.logo {
margin-left: 27%;
}
&-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
& > * {
padding: 0 0.8rem;
cursor: pointer;
}
&-icon-notification {
color: red;
}
}
}
}
}
Using Flex Box. It will be harder to achieve that, I have an alternative. Please test this code on codepen:
* {
box-sizing: border-box;
}
.parent{
width: 100%;
min-height: 80px;
background-color: yellow;
display: relative;
}
.nav-menu,
.icons{
display: inline-block;
}
.icons{
float: right;
margin-left: 75px; /*This will help your icons to never go below the logo element*/
}
.nav-menu{
margin-right: 75px; /*This will help your nav-menu items to never go below the logo element*/
}
.logo{
width: 150px;
height: 40px;
position: absolute;
left: 50%;
background-color: green;
transform: translateX(-50%);
}
<div class="parent">
<div class="nav-menu"> Your Menu</div>
<div class="logo"></div>
<div class="icons">Your Icons</div>
</div>
You can simply get the logo out you nav so that all three, logo, nav and icons become flex items and justify header's content with space-between. Below is the simplified code.
P.S. - Share the rendered code as your implementation in future and not JSX/SASS
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
}
.container .header {
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
color: #fff;
background-color: black;
}
.container .header .user-nav {
display: flex;
align-items: center;
}
.container .header .user-nav-item {
padding: 1.5rem;
cursor: pointer;
}
.container .header .user-nav-item-link {
text-decoration: none;
color: white;
}
.container .header .user-nav-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
}
.container .header .user-nav-icon > * {
padding: 0 0.8rem;
cursor: pointer;
}
.container .header .user-nav-icon-icon-notification {
color: red;
}
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<a class="user-nav-item-link">Overview</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Search</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Feed</a>
</div>
</nav>
<h3 class="logo">Logo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
Bell
</div>
<div class="user-nav-icon-box">
Settings
</div>
</div>
</header>
</div>
Here is an answer using display: flex; Flexbox is best & elegant to align items to mid of the page without cheesy computations by Margin, Transform,...
<html>
<head>
<style>
*, .container {
width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
color: ivory;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 13px;
}
.header {
display: flex;
align-items: center;
padding: 10px;
background-color: gray;
}
.user-nav {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
.user-nav-item {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
}
.user-nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<Link href="/">
<a class="user-nav-item-link">Overview</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/search">
<a class="user-nav-item-link">Search</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/feed">
<a class="user-nav-item-link">Feed</a>
</Link>
</div>
</nav>
<h3 class="logo">Logoooooooooooooooooooooo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div class="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
</body>
</html>
I am new to CSS and have been learning it.
I cannot seem to figure out how to make the 2 elements in the Div to perfectly vertically align with one another. I have been reading lots and lots of articles but I still cannot get my head around what I am doing wrong.
I have attached my code - your help would be great in my journey of learning.
Thank you!
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
To vertically align the contents of the boxes, you need to add align-items: center to their CSS.
Try flex-direction: column; it will make them appear on top of each other.
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
flex-direction: column;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
For your main div block, here .container1, set display attribute to block. It'll work!
.container1 {
width: auto;
display: block;
flex-direction: column;
padding: 10px;
height: auto; }