I´m starting my web developer training and i´m having trouble to move (in this case center) icons / images and text inside flexboxes.
Can anyone help?
my html
<div class="thirdcontainer">
<span class="flex3">
<img src="../challenge/img/feature-quality.png">
<img src="../challenge/img/feature-reliability.png">
<img src="../challenge/img/feature-speed.png"> </span>
</div>
My CSS
.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;
}
.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;
}
You forgot to add display: flex; to the containers CSS...
(note: I changed width to max-width for this example to make it fit in the snippet window).
.thirdcontainer{
max-width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="thirdcontainer">
<span class="flex3">
<img src="../challenge/img/feature-quality.png">
<img src="../challenge/img/feature-reliability.png">
<img src="../challenge/img/feature-speed.png"> </span>
</div>
Related
* {
margin: 0;
padding: 0;
overflow: auto;
font-family: Arial, helvetica, Sans-serif;
}
body {
background-color: aliceblue;
}
.container {
margin: 50%;
width: 324px;
height: 495px;
border: 10px solid white;
border-radius: 20px;
/* Setup */
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.child {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 70%;
}
.container .child2 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 100%;
}
<div class="container">
<h3 class="child">
Improve your front-end skills by building front-end projects
</h3>
<h6 class="child2">
Scan the QR code to visit Front-end Mentor and take your coding skills to
the next level
</h6>
</div>
In the code snippet above h3 text is below h6 text , although i would want h6 text to be nicely fit under h3 text in the container
This becomes a problem. Should I remove h6 heading to paragraph txt so that it will perfectly under h3 tag?
Need some advice
h3 tag and h6 are side by side because you are using flexbox and by default flexbox elements are aligned in row
what you can do is to bring h6 under h3 is you can use another div container and make it flex and change its direction to column flex-direction: column
here is the updated code
* {
margin:0;
padding:0;
overflow: auto;
font-family: Arial, helvetica , Sans-serif;
}
body {
background-color: aliceblue;
}
.container {
margin: 50%;
width: 324px;
height: 495px;
border: 10px solid white;
border-radius: 20px;
/* Setup */
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.content{
margin-top: 70%;
display:flex;
flex-direction:column;
}
.child {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container .child2 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-top:10%;
/* margin-top: 100%; */
}
<div class="container">
<div class="content">
<h3 class="child"> Improve your front-end skills by building front-end projects
</h3>
<h6 class="child2"> Scan the QR code to visit Front-end Mentor and take your coding skills to the next level</h6>
</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
Why is that? I was under the impression you can do so with a percent width?
See the example below:
.amphead__branding-center {
width: 55%;
height: 3.5rem;
margin: 0 auto;
border-radius: 15px;
background-color: green;
}
.amphead__center-logo {
width: 30%;
display: flex;
flex-direction: column;
flex-basis: auto;
align-content: center;
justify-content: center;
font-family: serif;
background-color: #000;
color: #fff;
}
.engineering {
font-family: 'Source Sans Pro', sans-serif;
background-color: $main-amp-color;
color: lighten($grate-color, 2%);
}
<div class="amphead__branding-center">
<div class="amphead__center-logo">
<span>Main header</span>
<span class="engineering">Sub Header</span>
</div>
</div>
Howcome "main header" and "sub header" aren't in the center?
These resources suggest what I'm doing should work
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox: center horizontally and vertically
Whats the problem?
Nothing to do with percentage lengths.
You want to horizontally center amphead__center-logo, then apply the centering properties to the parent.
Add this to your code:
.amphead__branding-center {
display: flex;
justify-content: center;
}
.amphead__branding-center {
width: 55%;
height: 3.5rem;
margin: 0 auto;
border-radius: 15px;
background-color: green;
/* new */
display: flex;
justify-content: center;
}
.amphead__center-logo {
width: 30%;
display: flex;
flex-direction: column;
flex-basis: auto;
align-content: center;
justify-content: center;
font-family: serif;
background-color: #000;
color: #fff;
}
.engineering {
font-family: 'Source Sans Pro', sans-serif;
background-color: $main-amp-color;
color: lighten($grate-color, 2%);
}
<div class="amphead__branding-center">
<div class="amphead__center-logo">
<span>Main header</span>
<span class="engineering">Sub Header</span>
</div>
</div>
You need to apply display: flex, justify-content, flex-direction and/or align-items to the parent.
Also because you use flex-direction: column you need to use align-items to center horizontally.
.amphead__branding-center {
display: flex;
flex-direction: column;
align-items: center;
width: 55%;
height: 3.5rem;
margin: 0 auto;
border-radius: 15px;
background-color: green;
}
.amphead__center-logo {
width: 30%;
flex-basis: auto;
font-family: serif;
background-color: #000;
color: #fff;
}
.engineering {
font-family: 'Source Sans Pro', sans-serif;
background-color: $main-amp-color;
color: lighten($grate-color, 2%);
}
<div class="amphead__branding-center">
<div class="amphead__center-logo">
<span>Main header</span>
<span class="engineering">Sub Header</span>
</div>
</div>
Trying to do a simple website recreation using flexbox. Here is the final goal (for this step):
Pretty simple. But I am struggling with aligning the text. I am able to get the header to center just fine. It's mainly the paragraph underneath that I am having trouble centering. Is there a way to center that paragraph vertically and horizontally to its outer container? New to flexbox and would like any tips! Here is a link to my codepen and relevant code: https://codepen.io/gkunthara/pen/qjympg
HTML
<div class = "content-container">
<h1 class = "main-header"> Connect with Subscribers Effortlessly </h1>
<p class = "sub-header"> Email Marketing Platform for Bloggers &
Authors. </p>
</div>
CSS
.content-container .main-header{
box-sizing: border-box;
font-weight: 600;
font-size: 45px;
height:75px;
padding-left: 5px;
padding-right: 5px;
color: rgb(51, 51, 51);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-style: solid;
}
.content-container .sub-header {
border-style: solid;
display: flex;
height: 25px;
margin-top: 150px;
}
You just need to do two things.
1. Add
flex-direction: column;
align-items: center;
to your .content-container class.
2. Remove margin-top: 150px from .content-container .sub-header and it should be it.
* {
box-sizing: border-box;
}
.content-container {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
border-style: solid;
margin-top: 15px;
flex-direction: column;
align-items: center;
}
.content-container .main-header {
box-sizing: border-box;
font-weight: 600;
font-size: 30px;
height: 75px;
padding-left: 5px;
padding-right: 5px;
color: rgb(51, 51, 51);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-style: solid;
}
.content-container .sub-header {
border-style: solid;
height: 25px;
}
<div class="content-container">
<h1 class="main-header"> Connect with Subscribers Effortlessly </h1>
<p class="sub-header"> Email Marketing Platform for Bloggers & Authors. </p>
</div>
Here is the fiddle to play with.
Hope this helps.
If you remove the margin-top in your .content-container .sub-header rule and add flex-direction: column; align-items: center; to your .content-container the text will center properly
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
.header-container {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: space-between;
padding-left: 50px;
padding-right: 75px;
}
.header-container .logo {
width: 250px;
}
.header-container .logo .sb {
max-width: 100%;
}
.header-container .nav-bar-container {
display: flex;
}
.nav-link {
text-decoration: none;
color: #4B4B4B;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 15px;
}
.content-container {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-style: solid;
margin-top: 15px;
}
.content-container .main-header {
box-sizing: border-box;
font-weight: 600;
font-size: 45px;
height: 75px;
padding-left: 5px;
padding-right: 5px;
color: rgb(51, 51, 51);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-style: solid;
}
.content-container .sub-header {
border-style: solid;
display: flex;
height: 25px;
}
/* Resize window to see its effect */
#media( max-width: 700px) {
.header-container {
flex-direction: column;
}
}
<div class="header-container">
<a class="logo"> <img class="sb" src="logo.png" alt="logo"> </a>
<nav class="nav-bar-container">
<a class="nav-link" href="#"> Tour </a>
<a class="nav-link" href="#"> Pricing </a>
<a class="nav-link" href="#"> Medium </a>
<a class="nav-link" href="#"> Sign Up </a>
<a class="nav-link" href="#"> Login </a>
</nav>
</div>
<div class="content-container">
<h1 class="main-header"> Connect with Subscribers Effortlessly </h1>
<p class="sub-header"> Email Marketing Platform for Bloggers & Authors. </p>
</div>
If you intended to center the .content-container .sub-header w/o take the .content-container .main-header into account, you need to position the .content-container .main-header absolute
With this, it will work with or w/o the flex-direction: column;, which I added in the first solution.
Note though, that on less wider screen you need to adjust both, or else they will overlap
Updated codepen
Added these properties to your .content-container .main-header
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
I want to center a custom button and I can't seem to find a solution.
I can align it but I don't know how to make the border smaller and not take up the whole width of my h1 text
HTML:
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
display: flex;
justify-content: center;
}
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
Browse
</div>
</div>
You mean something like this?
set #textMain with
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
Snippet
#TextMain {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
}
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
Browse
</div>
</div>
Try this
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
display: flex;
margin:0 auto;
justify-content: center;
width:100px;
}
Check it out
You have to set the align to center and the margin to auto. Just add the following enclosing div to your button.
<div style="margin:auto; width:200px;" align="center">
Browse
</div>
You just need to wrap your button in a block level element. You could use a <div> so your markup would be;
HTML
<div class="wrapper">
Browse
</div>
CSS
.wrapper #button {
text-align:center;
}
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;
}