This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I have div with h3 and button inside of it, and my div has display:flex; with justify-content:center; align-items:center; and when i insert these propeties, my button sticks on the right side of the h3 i tried creating div and putting button in it, but that just breakes the view
So question is, how do i put button under h3? Do i have missing flex properties?
.tittle-block {
display: flex;
justify-content: center;
align-items: center;
background: url(../img/background.png) 0% no-repeat;
padding: 0;
min-height: 495px;
}
.tittle {
text-align: center;
width: 555px;
color: #fff;
font-size: 42px;
margin: 0;
}
.button {
display: flex;
justify-content: center;
align-items: center;
flex-direction: wrap;
border: 1px solid white;
border-radius: 5px;
background: none;
color: #fff;
font-size: 25px;
}
<div class="tittle-block">
<h3 class="tittle">Text here</h3>
<button type="button" class="button">View more</button>
</div>
All you need to do is add flex-direction: column.
But, first, you've a syntax error:
<div class="tittle-block> , you need to close the class tag, like this <div class="tittle-block">
.tittle-block{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url(../img/background.png) 0% no-repeat;
padding: 0;
min-height: 495px;
}
.tittle{
text-align: center;
width: 555px;
color: #000;
font-size: 42px;
margin: 0;
}
.button{
display: flex;
justify-content: center;
align-items: center;
flex-direction: wrap;
border: 1px solid white;
border-radius: 5px;
background: none;
color: #000;
font-size: 25px;
}
<div class="tittle-block">
<h3 class="tittle">Text here</h3>
<button type="button" class="button">View more</button>
</div>
ps: I edited the font to be #000 so that you can see it, change it back to your original #fff.
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:
How can I horizontally center an element?
(133 answers)
How to center a button within a div?
(16 answers)
Closed 5 months ago.
I have the following code in index.html
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Flex works in all elements except for the <button> element. It doesn't center it. Why is that?
Most browsers display button elements as inline-block by default, so, it won't occupy 100% of parent's width. If you apply width 100% it will center the text, just like h1, h2. If you want to center the button itself you can use margin: 0 auto; property.
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
width: 100%;
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
add to your button class margin-left: auto; margin-right:auto;
should look like that
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
For your problem you need to read this article:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You should add
margin: auto;
display: block;
to #increment-btn style.
Other solution is to add a div parent element to the button and add flex style there:
display: flex;
justify-content: center;
I made a codepen for you: https://codepen.io/kovtib/pen/vYjgXrP
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-inline: auto;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Add margin-inline: auto to your button styles.
I would like to center something in my code with flexbox. It works for all other elements, only here something seems to be wrong.
Does anyone have an idea?
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
This is how it gets displayed in my live server
You can add body tag on css to make center on the page
to make horizontal center
body {
display: flex,
justify-content: center
}
or make vertical center
body {
display: flex,
align-items: center,
height: 100vh /* This is for full height of your screen */
}
or make horizontal and vertical center
body {
display: flex,
justify-content: center,
align-items: center,
height: 100vh
}
Your "Answer" is centered in the box. Are you trying to center the box on the page? In that case, you would need to apply flex styles to the parent. In this case, the body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0px; /*add to remove body margin which always present and makes v-scroll if not removed*/
}
.answer {
display: flex;
justify-content: center;
margin-bottom: 20px; /*Remove it if their is no other content on page*/
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
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!
I am using flexbox to create part of a page and I have 2 buttons that will open modals in one of the flexbox items. I would like to fix the buttons to the bottom of the item like a footer if possible.
I have created a CodePen to demo the issue. I have tried several solutions but I can't seem to get the buttons aligned at the bottom. I am relatively new to HTML and CSS so it's very possible that I've missed something trivial.
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
button {
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
You can make .one display: flex; flex-direction: column;, wrap the buttons in an element, and use justify-content: space-between on .one to push the buttons to the bottom of the column.
#container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one{
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.two{
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
button {
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<div class="buttons">
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
Since flex properties only apply to the children of a flex container, your buttons are not flex items.
The buttons are descendants of the flex container (#container), but not children, so they are beyond the scope of flex layout.
One method to resolve the issue would be to make the parent of the buttons a flex container. Then flex properties can be applied to the buttons.
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
flex-grow: 1;
height: 600px;
display: flex; /* new */
flex-wrap: wrap; /* new */
}
p {
flex: 0 0 100%; /* new */
}
button {
margin: auto 10px 0; /* new */
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
Learn more about the flex formatting context here:
Proper use of flex properties when nesting flex containers
Learn more about flex auto margins here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
One approach would be to put your buttons in their own <div> like so:
<div id="container">
<div class="one">
<p> I would like to align the buttons to the bottom of this item </p>
<div class="btn-container">
<button id="Btn1">Open Modal 1</button>
<button id="Btn2">Open Modal 2</button>
</div>
</div>
<div class="two">
<p> No buttons for this item </p>
</div>
and change your css to:
#container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: center;
margin-top: 20px;
}
.one {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
height: 100vh;
background-color: black;
color: white;
font-size: 30px;
padding: 10px;
width: 450px;
height: 600px;
}
.two {
background-color: grey;
color: white;
font-size: 30px;
padding: 10px;
flex-grow: 1.2;
width: 524px;
height: 600px;
}
.btn-container {
justify-content: flex-end;
display: flex;
}
button {
margin: 10px;
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}