I have a project and i struggle with positioning elements in CSS. i want to create a header with a contact number and email to the right and in image at the centre.
The below is the code. suggestions to overcome this problem i'm facing are very welcome.
header {
display: block;
text-align: center;
}
#cw-logo-trans {
width: 200px;
display: inline-block;
align-items: right;
font-size: 24px;
}
#contacts {
margin-left: 5px;
float: left;
color: white;
font-size: 1.5em;
/* 40px/16=2.5em */
color: white;
}
.home {
width: 70px;
height: auto;
background-color: white;
padding: 10px;
margin: 10px;
float: left;
text-align: center;
}
<header>
<span id="cw-logo-trans" alt="cw-logo-trans">
<img src="images/cw_logo.png" alt="cw-logo-" > </span>
<span id="contacts">0800 111 111</br>email#emailyou.com</span>
<div class="home" alt="Home-button">Home</div>
</br>
</header>
Or you can use Flex as well.
.outer {
display: flex;
background-color: lightgray;
}
.outer div {
flex: 1;
align-items: center;
}
.logo {
display: flex;
justify-content: center;
}
<div class="outer">
<div></div>
<div class="logo">
<image src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png" height="40px" width="40px" />
</div>
<div>
<p>markzuckerberg#twitter.com</p>
<p>1234567890</p>
</div>
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 5 months ago.
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
text-align: right;
align-items: center;
}
body {
font-size: 20px;
margin: 0px;
justify-content: center;
}
.logo {
text-align: left;
align-items: center;
}
.menu {
margin-left: 10px;
}
a {
text-decoration: none;
color: #000000;
}
.welcome {
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1 {
font-size: 40px;
}
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px;
display: flex;
justify-content: center;
}
main>.item {
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
hi I just started learning coding.I wanted to create a rwd page.Now I'm facing a problem is that I want to move my main area to the center of the page but I couldn't do it. I've tried to add display:flex to body. But everything would move. Should I add a div in the main? Can't figure it out. What should i do now? Here's the code.Thanks
You want to center the main element right?
main{
width: 1200px;
background-color: #76a5d5;
/*See here 10px will be used for top and bottom and for left and right
it will automatically divide equally both sides using auto.
*/
margin: 10px auto;
display: flex;
justify-content: center;
}
Try replacing this ruleset in your css.
Using auto for the left and right margin gives the desired result.
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
text-align: right;
align-items: center;
}
body {
font-size: 20px;
margin: 0px;
justify-content: center;
}
.logo {
text-align: left;
align-items: center;
}
.menu {
margin-left: 10px;
}
a {
text-decoration: none;
color: #000000;
}
.welcome {
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1 {
font-size: 40px;
}
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px auto;
display: flex;
justify-content: center;
}
main>.item {
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
Answer
You can do this with CSS align-self property.
First, we need give the <body> display flex and set the direction to column (vertical).
body {
font-size: 20px;
margin: 0px;
display: flex;
flex-direction: column; /* this change the direction to vertical */
}
then change the main area to center
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px;
align-self: center; /* this move the element to center */
}
Demo
header{
display: flex;
justify-content: space-between;
}
nav{
display: flex;
text-align: right;
align-items: center;
}
body{
font-size: 20px;
margin: 0px;
display: flex;
flex-direction: column;
}
.logo{
text-align: left;
align-items: center;
}
.menu{
margin-left: 10px;
}
a{
text-decoration: none;
color:#000000;
}
.welcome{
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1{
font-size: 40px;
}
main{
width: 1200px;
background-color: #76a5d5;
margin: 10px;
align-self: center;
}
main>.item{
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="RWDstyle.css"/>
<title>RWD test</title>
</head>
<body>
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
</body>
</html>
I'm trying to align the Modern Art Gallery and the text using flexbox but when I do that the whole container moves left and right. Even more so I want to change the width of the h1 but I'm not sure how to do that.
Some code may be missing as I'm working on multiple devices but I only need help with the desktop version which is what's shown.
Here's what I want it to look like:
.container-content {
border: 2px solid blue;
position: relative;
display: flex;
justify-content: space-between;
gap: 2rem;
}
.container-content h1 {
font-size: 96px;
padding: 0;
}
#tablet-img {
display: none;
}
#desktop-img {
display: block;
background-color: grey;
padding-left: 450px;
}
.desktop-text-button {
border: 2px solid red;
position: absolute;
margin-left: 1%;
}
}
<div class="container-flex">
<img id="desktop-img" src="../art-gallery-website/starter-code/assets/desktop/image-hero.jpg" alt="desktop-image">
<div class="container">
<div class="container-content">
<h1>MODERN ART GALLERY</h1>
<div class="desktop-text-button">
<p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p>
<div class="button-1">
<button>Our Location</button>
<span class="right-arrow"></span>
</div>
</div>
</div>
</div>
</div>
Your code was messy so I just recoded it. Is this what you want?
.wrapper {
display: flex;
flex-direction: row;
width: 100%;
height: 90vh;
}
.wrapper .left {
width: 70%;
height: 100%;
background-image: url('https://wallpaperaccess.com/full/4707236.jpg');
background-size: cover;
border: 1.2px solid #000000;
}
.wrapper .left p {
font-size: 6vw;
font-weight: 700;
margin-top: 15%;
margin-left: 10%;
color: #ffffff;
}
.wrapper .left p span {
color: #000000;
}
.wrapper .right {
display: flex;
flex-direction: column;
column-gap: 2vh;
position: relative;
right: 7%;
width: 30%;
height: 40%;
margin-top: 10%;
}
.wrapper .right p {
font-size: 2vw;
}
.wrapper .right button {
font-size: 1.6vw;
width: 45%;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="left">
<p>MODERN <br /> ART GAL<span>LERY</span></p>
</div>
<div class="right">
<p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p>
<button>OUR LOCATION</button>
</div>
</div>
I really don't know what I'm doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what's going on. I don't know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn't do better ...:)
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<h20>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</h20>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
h4 and h20 are empty
You're pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
display: flex;
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container's children to the center like you want, you'll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.
As for the image shrinking down when the screen width is shrinked - this is because you're using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.
Flexbox is super useful for position elements in CSS and I'd recommend looking into this more to have a better understanding. Check out this link here if you'd like an overview of the different flexbox CSS properties.
I am not 100% sure on your intent - Here I changed the class names a bit for clarity and adjusted the markup for a left-middle-right
Not a huge fan of % for padding and margin sizing myself (em feels more clear since it is based on the current font size)
Not strictly needed but I added the containing element class in a few places in CSS for clarity example: .left-pane .picture-container
.page-container {
max-width: 1600px;
text-align: center;
}
.container-box {
display: flex;
align-content: space-between;
}
.container-box .left-pane {
width: 20em;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF0000;
border: 2px solid gray;
}
.left-pane .picture-container {
width: 30%;
background-color: yellow;
align-items: center; /* vertical */
align-content: center; /* horizontal */
}
.left-pane .picture-container .picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.container-box .middle-pane {
width: 70em;
background-color: #FFDDDD;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 1%;
border-left: 2px ridge #ffa54f;
}
.middle-pane .headline {
color: rgb(0, 153, 158);
font-size: 1.5em;
font-family: sans-serif;
margin-bottom: 1em;
background-color: #eeeeee;
}
.middle-pane .textpart {
margin-bottom: 0.5em;
}
.container-box .right-pane {
height: 20px;
border: 2px solid gray;
}
<div class="page-container">
<div class="container-box">
<div class="left-pane">
<div class="picture-container">
<div>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
</div>
</div>
<div class="middle-pane">
<div class="headline">Headline</div>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right-pane">
wawaeaweew
</div>
</div>
</div>
I would like my site to look as in this design:
so I tried to create a flexbox with a horizontal display, and each activity will be a flexbox with a column display.
for some reason, it did not work as expected.
I also looked int a possibility of using grid, but it does not seem to offer a solution
something is not working right. wondering whether anyone can enlighten me.
thanks!!!
<!-- **** launch container ****** -->
<section class = "launch-container">
<div class = "launch">
<div>
<h1>Launch</h1>
<p>
Set up your first campaign and get
your reps right to work on our fully
integrated, browser-based platform.
</p>
</div>
<div>
<img src="./images/launch.svg" alt="launch">
</div>
</div>
<div class = "launch-activities"
<div class="upload" >
<img src="./images/upload.svg" alt="upload">
<div class="info">
<h6>Upload your leads</h6>
<p >
Easily upload and manage your contacts
with custom fields and dynamic lists.
</p>
</div>
</div>
<div class="calling" >
<img src="./images/calling.svg" alt="calling">
<div class="info">
<h6>Start Calling</h6>
<p>
Use custom outbound numbers, calling
queues and our preview dialer to ensure
success with your call campaigns.
</p>
</div>
</div>
<div class="script" >
<img src="./images/script.svg" alt="script">
<div class="info">
<h6>Write your script</h6>
<p>
Create personalized scripts to ensure
brand consistency by specifying exactly
what agents should say on the phone.
</p>
</div>
</div>
</div>
</section>
/* *** launch container **** */
.launch-container {
/* display: flex; */
color: #1E95EE;
width: 1280px;
height: 529px;
/* justify-content: space-around; */
}
.launch {
margin-top: 105px;
display: flex;
position: relative;
}
.launch h1 {
color: #1E95EE;
text-align: left;
font-weight: 600;
font-size: 42px;
/* margin-bottom: 0;
margin-top: 16.5px; */
}
.launch p {
color: #1E95EE;
width: 420px;
height: 99px;
text-align: left;
font-weight: 350;
opacity: 0.9;
}
.launch-activities {
display: flex;
justify-content: space-between;
}
.launch-activities
.upload, .calling, .script,
.info p {
color: #1E95EE;
width: 250px;
text-align: left;
display: inline-block;
}
.launch-activities
.upload, .calling, .script,
.info h6 {
font-size: 20px;
font-weight: bolder;
color: #1E95EE;
text-align: left;
}
.launch-activities .upload{
display: flex;
flex-direction: column;
}
.launch-activities .calling{
display: flex;
flex-direction: column;
}
.launch-activities .script{
display: flex;
flex-direction: column;
}
.launch-activities
.upload, .calling, .script,
img {
display: inline;
}
Instead of having all the code for Rome, I suggest that you build the skeleton first, and then add onto it. It seems your wanted .launch-container to be a flex container, which is correct, but for some reason you commented it out, making it a non-flex container. So how can items flow as flex items inside of it?
You also seem to make each flex item in turn another flexbox. That is possible, but from your layout for each section, it seems they don't have to be... they can just be old traditional CSS.
But I suggest you get the skeleton right, and then add a little bit on top of it, and ask another question if one thing doesn't seem to work correctly. Right now you are like putting the whole Rome here and ask how to fix it.
A skeleton:
also on https://jsfiddle.net/gyuL0e3s/2/
/* *** launch container **** */
.launch-container {
display: flex;
color: #1E95EE;
width: 600px;
height: 200px;
align-items: center;
justify-content: space-around;
border: 1px dotted blue;
}
.launch-container .container-item {
border: 1px dotted orange;
width: 100px;
height: 80px;
}
<!-- **** launch container ****** -->
<section class="launch-container">
<div class="launch container-item">
</div>
<div class="launch-activities container-item">
</div>
<div class="calling container-item">
</div>
<div class="script container-item">
</div>
</section>
Need to fix your html mark up first. And in your CSS, you have specified flex-direction as "column" under .upload, .script and .calling. That's why you are seeing the image, heading and description in vertical alignment.
/* *** launch container **** */
.launch-container {
/* display: flex; */
color: #1E95EE;
width: 1280px;
height: 529px;
/* justify-content: space-around; */
}
.launch {
margin-top: 105px;
display: flex;
position: relative;
}
.launch h1 {
color: #1E95EE;
text-align: left;
font-weight: 600;
font-size: 42px;
/* margin-bottom: 0;
margin-top: 16.5px; */
}
.launch p {
color: #1E95EE;
width: 420px;
height: 99px;
text-align: left;
font-weight: 350;
opacity: 0.9;
}
.launch-activities {
display: flex;
justify-content: space-between;
}
.launch-activities
.upload, .calling, .script,
.info p {
color: #1E95EE;
width: 250px;
text-align: left;
}
.launch-activities
.upload, .calling, .script,
.info h6 {
font-size: 20px;
font-weight: bolder;
color: #1E95EE;
text-align: left;
margin: 2px 0 0 0;
}
.info {
margin:0 0 0 15px;
}
.upload, .calling, .script {
display: flex;
}
<!-- **** launch container ****** -->
<section class = "launch-container">
<div class = "launch">
<div>
<h1>Launch</h1>
<p>
Set up your first campaign and get
your reps right to work on our fully
integrated, browser-based platform.
</p>
</div>
<div>
<img src="./images/launch.svg" alt="launch">
</div>
</div>
<div class = "launch-activities">
<div class="upload" >
<img src="./images/upload.svg" alt="upload">
<div class="info">
<h6>Upload your leads</h6>
<p >
Easily upload and manage your contacts
with custom fields and dynamic lists.
</p>
</div>
</div>
<div class="calling" >
<img src="./images/calling.svg" alt="calling">
<div class="info">
<h6>Start Calling</h6>
<p>
Use custom outbound numbers, calling
queues and our preview dialer to ensure
success with your call campaigns.
</p>
</div>
</div>
<div class="script" >
<img src="./images/script.svg" alt="script">
<div class="info">
<h6>Write your script</h6>
<p>
Create personalized scripts to ensure
brand consistency by specifying exactly
what agents should say on the phone.
</p>
</div>
</div>
</div>
</section>
ok, solved it.
with nested flexboxes, as follows:
<!-- **** launch container ****** -->
<section class = "launch-container">
<div class = "launch">
<div>
<h1>Launch</h1>
<p>
Set up your first campaign and get
your reps right to work on our fully
integrated, browser-based platform.
</p>
</div>
<div>
<img src="./images/launch.svg" alt="launch">
</div>
</div>
<div class = "launch-activities">
<div class="upload container-item" >
<div >
<img src="./images/upload.svg" alt="upload">
</div>
<div class="information">
<h6>Upload your leads</h6>
<p>
Easily upload and manage your contacts
with custom fields and dynamic lists.
</p>
</div>
</div>
<div class="calling container-item" >
<div>
<img src="./images/calling.svg" alt="calling">
</div>
<div class="information">
<h6>Start Calling</h6>
<p>
Use custom outbound numbers, calling
queues and our preview dialer to ensure
success with your call campaigns.
</p>
</div>
</div>
<div class="script container-item" >
<div class="information">
<img src="./images/script.svg" alt="script">
</div>
<div class="information">
<h6>Write your script</h6>
<p>
Create personalized scripts to ensure
brand consistency by specifying exactly
what agents should say on the phone.
</p>
</div>
</div>
</div>
</section>
/* *** launch container **** */
.launch-container {
display: flex;
flex-direction: column;
color: #1E95EE;
width: 1280px;
height: 529px;
/* justify-content: space-around; */
}
.launch {
margin-top: 105px;
display: flex;
position: relative;
}
.launch h1 {
color: #1E95EE;
text-align: left;
font-weight: 600;
font-size: 42px;
/* margin-bottom: 0;
margin-top: 16.5px; */
}
.launch p {
color: #1E95EE;
width: 420px;
height: 99px;
text-align: left;
font-weight: 350;
opacity: 0.9;
}
.launch-activities {
display: flex;
color: #1E95EE;
width: 1280px;
/* height: 700px; */
margin-right: 120px;
margin-left: 120px;
align-items: top;
justify-content:space-between;
border: 1px dotted blue;
}
.container-item {
border: 1px dotted orange;
display: flex;
width: 300px;
justify-content: space-between;
/* height: 110px; */ */
}
.container-item img {
margin-left: 0;
margin-top: 0;
}
.container-item h6 {
font-size: 20px;
font-weight: 550;
color: #1E95EE;
text-align: left;
padding: 0;
margin-top: 0;
margin-bottom: 0;
/* margin: 2px 0 0 0; */
}
.container-item p {
font-size: 14px;
font-weight: 400;
color: #1E95EE;
width: 250px;
text-align: left;
margin-top: 6px;
}
.information {
display: flex;
flex-direction: column;
}
.launch-activities .upload{
display: flex;
}
.launch-activities .calling{
display: flex;
}
.launch-activities .script{
display: flex;
}
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>