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;
}
Related
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!
Goal: I have a main flex box with row display. Within each of these flexbox I will have card with text inside. When I create the card inside the flexbox I place p tags inside the card with the text, but it does not reflect. I want the text to dsiplay within each card.
Code
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
line-height: 70vh;
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
Remove line-height: 70vh; property from the .flex-container>div
.flex-container {
display: flex;
flex-direction: row;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 10px;
/*text-align: center;*/
/*line-height: 70vh;*/
font-size: 30px;
}
.funds-card {
display: flex;
flex-direction: column;
width: 200px;
}
.transaction-card {
width: 700px
}
.amount-card {
width: 70%;
height: 70px;
max-width: 100px;
border-radius: 5px;
margin: 5px auto 0 auto;
padding: 1.5em;
background-color: green;
text-align: center;
}
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>
<div class="flex-container">
<div class="funds-card">
<div class="amount-card">
<p>Hello</p>
</div>
</div>
<div class="transaction-card">
2
</div>
</div>
</body>
This question already has an answer here:
Text not centered with justify-content: center
(1 answer)
Closed 1 year ago.
I'm trying to make an array of "buttons" with links.
It works fine when the text is only one line, but if the text wraps to two lines, the lines get left justified.
I'd rather have both lines centered.
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences get left-justified</div>
</div>
Try this:
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences <b>DON'T</b> get left-justified</div>
</div>
The problem with your code was that because it overflowed, the container expanded to the maximum possible width, making it appear as if the text wasn't center-aligned. Adding a text-align:center fixes that problem.
You can try adding justify-content: center; or align-items: center;
on your flexbox container!
in spite of my research on the internet I did not succeed in doing what I wanted to do.
I want to put my text to the left of my text or my text to the right of my image but I can't do it.
Here is the code :
HTML :
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
CSS :
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
width: 150px;
height: 150px;
}
Thank you for reading
Since you're trying to change your text's, you have to change your flex-item div, which is:
In your Css script, put this:
.flex-item{
display:flex;}
Set display:flex; on your flex-item div.
HTML:
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
CSS:
.flex-item{
display:flex;
}
Change your .flex-item class to this hope this solves your problem.
.flex-item {
display:flex;
flex-direction:row;
}
I tried like this. It works.
<div class="surfooter">
<div class="flex-container">
<div class="flex-item">
<img src="img/Nike.png" alt="Nike" class="img-responsive"/>
<p>Nike.com</p>
</div>
<div class="flex-item">
<img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
<p>Adidas.com</p>
</div>
</div>
</div>
css
.surfooter{
padding-bottom: 50px;
padding-top: 50px;
background-color: #466964;
color: white;
font-size: 16px;
position: relative;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 200px;
position: relative;
}
.flex-item {
margin: auto;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item p{
color: white;
font-size: 1.41em;
font-weight: bold;
line-height: 1.3em;
width: 80%;
margin: 0 auto;
}
.flex-item img{
object-fit: cover;
border-radius: 100%;
}
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>