Just finished a mini project and everything seemed to be going accordingly until I completed the footer this page. For each section, the divs do not stretch to the end, which wasn't an issue before. I'm assuming it's something to do with the pixels on the page?
Notice the gap on the left/right of the screen:
enter image description here
enter image description here
HTML:
<body>
<div class="header">
<div class="header-left">
<div class="logo">Header Logo</div>
</div>
<div class="header-right">
<div class="links-top">
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</div>
</div>
</div>
<div class="hero">
<div class="hero-left-head">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes here under the main title. It’s a smaller font and the color is lower contrast.</p>
<button class="hero-button">Sign Up</button>
</div>
<div class="sade">
<img src="https://s3.us-east-1.amazonaws.com/vnda-cockpit/www-streetopia-me/2020/09/11/5f5bfd8c2bb85sade01.jpg" alt="sade" height="200" width="350">
</div>
</div>
<div class="middle">
<div class="title"><h1>Some Information?</h1></div>
<div class="bmw-pics">
<div class="bmw-text">
<img src="https://aprperformance.com/wp-content/uploads/2015/01/BMW_M4_Lip_Installed_LR_7.jpg" alt="puke-green">
<p>Puke Green</p>
</div>
<div class="bmw-text">
<img src="https://cdn.bmwblog.com/wp-content/uploads/2015/03/Yas-Marina-Blue-BMW-F80-M3-Gets-Some-Essential-Updates-7.jpg" alt="yas">
<p>Yas Marina</p>
</div>
<div class="bmw-text">
<img src="https://f80.bimmerpost.com/forums/attachment.php?attachmentid=2671354&stc=1&d=1628858312" alt="Frost White">
<p>Frost White</p>
</div>
<div class="bmw-text">
<img src="https://1c2a8a2161d644d95009-22d26b38e78c173d82b3a9a01c774ffa.ssl.cf1.rackcdn.com/image/projectcars/f80m3/f80_m3_carbon_mirror_covers_7_w705.jpg" alt="Imola Red">
<p>Imola Red</p>
</div>
</div>
</div>
<div class="above-footer">
<div class="above-footer-p1">
<p>If you do what you've always done, then you'll get what you've always had, you dumb buffons!</p>
</div>
<div class="above-footer-p2">
<p>- A Wise Prophet</p>
</div>
</div>
<div class="last-space">
<div class="blue-box">
<div class="action"><strong>Call to action! It's time!</strong></div>
<div class="product-bit">Sign up for our product by clicking the button to your right :)</div>
<button class="last-button">Sign Up!</button>
</div>
</div>
<div class="footer">
<p>Copyright © The Odin Project 2021</p>
</div>
</body>
CSS:
.header {
background-color: #1F2937;
display: flex;
justify-content: space-around;
color: #f9faf8;
font-size: 24px;
padding: 10px;
}
.links-top {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
gap: 16px;
font-size: 20px;
}
a {
text-decoration: none;
color: #f9faf8;
}
p {
font-size: 15px;
}
.hero {
display: flex;
flex-direction: row;
background-color: #1F2937;
gap: 50px;
align-items: center;
justify-content: center;
padding-bottom: 30px;
}
.hero-left-head {
font-size: 24px;
color: #f9faf8;
}
.sade {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.hero-button {
background-color: #3882F6;
color:#f9faf8;
border-radius: 25px;
padding: 0;
height: 30px;
width: 100px;
}
.middle {
display: flex;
flex-direction: column;
color:#1F2937;
}
.bmw-pics {
display: flex;
margin-left: auto;
margin-right: auto;
gap: 20px;
}
.bmw-text img {
height: 260px;
border-radius: 10px;
width: 250px;
}
.bmw-text p {
text-align: center;
}
.title {
text-align: center;
}
.above-footer {
background-color: #e5e7eb;
justify-content: center;
display: flex;
flex-direction: column;
}
.above-footer-p1 p,
.above-footer-p2 p {
font-size: 36px;
}
.above-footer-p2 {
display: flex;
justify-content: flex-end;
margin-right: 50px;
}
.above-footer-p1 p {
font-style: italic;
margin-top: 100px;
color: #1F2937;
display: flex;
align-items: center;
justify-content: center;
}
.last-space {
color: #f9faf8;
display: flex;
justify-content: center;
align-items: center;
}
.blue-box {
display: flex;
background-color: #3882F6;
width: 800px;
margin: 50px;
flex-direction: column;
padding: 50px;
border-radius: 15px;
}
.last-button {
align-self: flex-end;
padding:5px 25px 5px 25px;
color:#F9FAF8;
background-color: #3882F6;
border-radius: 10px;
border-color: #F9FAF8;
justify-content: center;
}
.footer {
background-color: #1F2937;
color: #F9FAF8;
display: flex;
justify-content: center;
align-items: center;
}
Please forgive the extensive css sheet, I'm still learning :) Any help is greatly appreciated!
There's margin on the body. By default the body element has 8px of margin on all sides. You can resolve this by adding this CSS to your project:
body {
margin: 0;
}
Some call this a CSS reset. You can learn more here. Hope this helps!
It's because the body html element (along with many other elements) has margin automatically applied. You can just clear it by adding this to your CSS:
body {
margin: 0px
}
You might want to try using something like Normalize.css for your projects. It really removes a lot of these "why is this happening" issues related to CSS. Also, you should read up on your browser's Devtools (on Chrome, for example, you can click Ctrl+Shift+i and it will open. You can then inspect specific elements and it will tell you why a certain element has a certain style.
For example, you can see that by hovering over the first paragraph of your post that it has a margin-bottom of 1.1em because it is selected by .s-prose p.
Hope that helps!
Related
I am trying to wrap div text with flex but its not working, the title div seems to be overlapping the other post divs, I have tried using line height and applying flex wrap, still no fix. I've also tried centering with css grid but that didn't seem to get either,If anyone can help me with this thank you.
*,
*::before,
*::after {
font-family: Mukta, sans-serif;
}
body {
margin: 0;
padding: 0;
}
#header {
display: flex;
flex-direction: column;
gap: 25px;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#quote {
display: flex;
font-weight: 300;
font-size: 20px;
}
#name {
font-size: 55px;
}
#navlist {
display: flex;
padding-inline-start: 0px;
gap: 40px;
}
#navlistelm {
padding: 15px 38px;
font-size: 20px;
font-weight: 200;
list-style: none;
}
#navbar {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 20%;
}
#navimgcontainer {
display: flex;
flex-direction: row;
width: 100%;
height: 70%;
}
img {
height: 500px;
width: 1950px;
}
#aboutcontainer {
display: flex;
width: 80%;
height: 100%;
gap: 40px;
}
#about {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
width: 100%;
}
#aboutText {
display: flex;
font-size: 20px;
font-weight: 400;
flex-direction: column;
gap: 40px;
width: 100%;
}
#abouttitle {
font-weight: 700;
font-size: 40px;
}
#aboutImage {
display: flex;
justify-content: center;
align-items: center;
height: 90%;
width: 50%;
}
#ebookcontainer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80%;
}
#econtainer {
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 75%;
height: 80%;
background-color: #dd927c;
border-radius: 5px;
}
#ebookimage {
display: flex;
width: 45%;
height: 100%;
justify-content: flex-end;
align-items: center;
justify-content: center;
}
#ebook {
height: 585px;
width: 550px;
}
#etext {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
height: 100%;
}
#ebookstuff {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: center;
font-family: Dancing Script, 'sans serif';
width: 80%;
height: 50%;
color: white;
font-size: 80px
}
#egraph {
display: flex;
color: white;
padding-inline-start: 60px;
width: 100%;
height: 20%;
font-size: 30px;
}
#ebookdirect {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
width: 100%;
}
#ebutton {
border: none;
color: white;
font-size: 30px;
background-color: rgba(201, 115, 116, 255);
border-radius: 5px;
height: 60px;
width: 400px;
}
#ebutton:hover {
cursor: pointer;
}
#subscribelist {
padding: 0px;
list-style: none;
}
#subscribelistelm {
display: flex;
padding: 10px;
}
#footer {
display: flex;
flex-direction: column;
width: 100%;
height: 80%;
}
#text {
display: flex;
gap: 10px;
flex-direction: column;
width: 100%;
height: 20%;
}
#postcontainer {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#post1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
height: 100%;
width: 30%;
}
#postimg {
height: 300px;
width: 300px;
}
#postbutton1 {
border: none;
color: white;
font-size: 20px;
background-color: #de8e7a;
width: 30%;
height: 5%;
}
#post1title {
font-size: 30px;
font-weight: bold;
}
#post1preview {}
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Mukta:wght#200;300;400;500;600&display=swap" rel="stylesheet">
<section id="header">
<div id="name">CAVETTA JOHNSON</div>
<div id="quote">Living life with intention. Live don't just exist.</div>
</section>
<nav id="navbar">
<ul id="navlist">
<li id="navlistelm">Home</li>
<li id="navlistelm">Travel Blog</li>
<li id="navlistelm">ebook</li>
<li id="navlistelm">Merchandise</li>
<li id="navlistelm">1 On 1 Session</li>
<li id="navlistelm">About Us</li>
</ul>
</nav>
<div id="navimgcontainer">
<img src="./images/CAVETTA JOHNSON.png" alt="">
</div>
<section id="about">
<div id="aboutcontainer">
<div id="aboutText">
<div id="abouttitle">I finally decided to start living!</div>
Hey hey hey! My name is Cavetta, and welcome to Life With Vetta. I am a mom to 2 amazing boys. Kal-El 16 And Jor-El 11. I have been divorced and a single mom for a few years now. Juggling raising the men of tomorrow, working, having a life outside of
my boys (nonexistent). We LOVE to travel. I originally moved from Jamaica to California for college. The travel bug had bitten me and the need to see the world and what it has to offer has always been with me. I went on a few cruises before kids,
traveled to different states and cities, exploring and wandering. When I found myself with 2 kids, alone I knew one of my first goals was to show them the world and let them see things outside of their comfort zone. We took our first cruise when
they were itsy bitsy and had a blast. Since then, we traveled the states, city hopping and seeing their home country. We then trotted over to London and Paris when they were older and that struck a chord and lit a fire that was not going to be tamed
by anything but travel and adventure. I had been thinking and considering being a digital nomad.
</div>
<div id="aboutImage">
<img src="./images/IMG_3238.jpg" alt="">
</div>
</div>
</section>
<section id="ebookcontainer">
<div id="econtainer">
<div id="etext">
<div id="ebookstuff">So you want to travel the world
</div>
<div id="egraph">I do not have millions in the bank but I am making it happen without stress or worry.</div>
<div id="ebookdirect">
<button id="ebutton">Download!</button>
</div>
</div>
<div id="ebookimage">
<img src="./images/Digital Download! (1).png" alt="" id="ebook">
</div>
</div>
</section>
<section id="postcontainer">
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOO</div>
<div id="post1preview">sssssss</div>
<button id="postbutton1">Read More!</button>
</div>
<div id="post1">
<div id="post1img">
<img id="postimg" src="./images/Digital Download! (1).png" alt="">
</div>
<div id="post1title">YOOdddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div id="post1preview">ssssssddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddds</div>
<button id="postbutton1">Read More!</button>
</div>
</section>
<section id="footer">
<div id="Text">
<div id="title">Subscribe To Follow Our Adventures</div>
<div id="signup">Get the latest updates on where we are and what fabulous experiences we are having!</div>
</div>
<div id="Subscribe">
<form action="api" id="subscribeform">
<ul id="subscribelist">
<li id="subscribelistelm">
<input type="firstname" id="firstname" name="user_firstname" />
</li>
<li id="subscribelistelm">
<input type="lastname" id="lastname" name="user_lastname" />
</li>
<li id="subscribelistelm">
<input type="email">
</li>
<li id="subscribebutton">
<button>Yo</button>
</li>
</form>
</div>
</section>
One solution would be to assign width and word-wrap.
For example for the #post1title id:
#post1title {
font-size: 30px;
font-weight: bold;
width:100%;
word-wrap: break-word;
}
I'm learning how to create a website using flexbox and I'm having some trouble creating a header.
Basically, one <a> element that wraps around an <img> element takes up much more width than the other elements even though the picture itself isn't nearly as wide.
This is what it looks like: https://i.imgur.com/nEpI4xW.png
Here is my HTML code:
<body>
<div class="main-container">
<div class="header">
Home
Order
<img src="./images/logo.svg" alt="logo">
Checkout
Contact us
</div>
<div class="flowers-inventory">
Flowers Inventory
</div>
<div class="tools-inventory">
Tools Inventory
</div>
<div class="footer">
Footer
</div>
</div>
Here is the CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
display: flex;
background-color: #f4f4f4;
align-items: center;
text-align: center;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.header a{
white-space: nowrap;
text-decoration: none;
font-family: Roboto;
text-transform: uppercase;
font-size: 16px;
color: rgb(224, 170, 205);
}
.header img{
width: 22%;
}
.header .logo{
margin: 0 -40em;
}
You can use flex: 1 0 0; in your flex-items (here: .header a selector)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
display: flex;
background-color: #f4f4f4;
align-items: center;
text-align: center;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.header a{
white-space: nowrap;
text-decoration: none;
font-family: Roboto;
text-transform: uppercase;
font-size: 16px;
flex: 1 0 0;
color: rgb(224, 170, 205);
}
.header img{
width: 22%;
}
.header .logo{
margin: 0 -40em;
}
<body>
<div class="main-container">
<div class="header">
Home
Order
<img src="https://cdn.clipart.email/2a1b0b49218f3d58c2b6df1630b609d9_free-rectangle-cliparts-download-free-clip-art-free-clip-art-on-_618-361.jpeg" alt="logo">
Checkout
Contact us
</div>
<div class="flowers-inventory">
Flowers Inventory
</div>
<div class="tools-inventory">
Tools Inventory
</div>
<div class="footer">
Footer
</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;
}
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>
I have a 3x3 flexbox with an icon and title in each item/cell. I am just trying to horizontally center the icon (svg image). I tried justify-content: center; but it doesn't seem to work. Can any tell me how to horizontally center an image within a flexbox item (or cell, as I am referring to it as)? Code below.
HTML:
<div class="grid">
<div class="cell">
<img src="images/cs_icon_01.svg">
<div class="service-title">Materials Handling, Warehousing & Storage Facility Management</div>
</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
CSS:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 130px;
}
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
justify-content: center;
}
.grid img {
width: 45px;
}
.service-title {
display: inline-block;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
color: #4e4e4e;
line-height: 24px;
padding: 20px 16px 4px 16px;
text-align: center;
}
you can give a try to the classic display+margin:
.grid img {
width: 45px;
display:block;
margin:auto;/* horizontal center effect */
}
or use text-align:
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
/*justify-content*/ text-align: center;
}