This question already has answers here:
Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
(10 answers)
image is not resizing in a flexbox layout
(1 answer)
How to force an image to shrink to fit in flexbox?
(3 answers)
Fit image into auto-sized flex child
(2 answers)
Resize image height to match flex parent height
(2 answers)
Closed 4 months ago.
The image for my GBA website is overlapping the box and I don't know how to fix it. I want the image to fit perfectly in the middle of the box, but I can't figure it out. I think it might have something to do with the margin or something else in the CSS.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.gameshell {
height: auto;
justify-content: center;
display: flex;
gap: 2rem;
/*newly added*/
margin: 2rem 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
<div class="shell">
<a href="#" class="card">
<div class="card-header">Pokemon Emerald</div>
<div class="card-main">
<img src="https://via.placeholder.com/100" alt="retrobowlicon" width="80" height="80">
<div class="main-description"></div>
</div>
</a>
</div>
Related
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 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.
This question already has answers here:
Centering the link as the button
(3 answers)
Closed 2 years ago.
There's a style for a button, that can be applied to a-elements and button-elements:
.button {
appearance: none;
display: flex;
justify-content: center;
align-items: center;
width: auto;
min-width: 150px;
min-height: 50px;
margin: 0 auto 20px auto;
padding: 0;
border: 1px solid black;
background: white;
font-size: 1.4rem;
}
<a class="button">a-element</a>
<button class="button" type="button">a-element</button>
While this works fine, there's a difference in rendering:
the a-element has 100 % width of the parent container
the button-element doesn't stretch and is centered
I'm not sure which browser default style property for buttons causes this.
How can I make the a-element to behave like the button?
So, the element is centered but not stretched.
Use inline-flex
.button {
appearance: none;
display: flex;
justify-content: center;
align-items: center;
width: auto;
min-width: 150px;
min-height: 50px;
margin: 0 auto 20px auto;
padding: 0;
border: 1px solid black;
background: white;
font-size: 1.4rem;
}
a.button {
display: inline-flex;
background: lightblue;
}
body {
text-align:Center;
}
<a class="button" href="#">a-element</a>
<button class="button" type="button">a-element</button>
It's just because of display : flex, can be solved with inline flex
EDITED
.button {
appearance: none;
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 150px;
min-height: 50px;
width: auto;
margin: 0 auto 20px auto;
padding: 0;
border: 1px solid black;
background: white;
font-size: 1.4rem;
}
.btn-container{
text-align:center;
}
<div class="btn-container">
<a class="button">a-element</a>
<button class="button" type="button">a-element</button>
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
How to remove margin space around body or clear default css styles
(7 answers)
How can I get rid of margin around my HTML content?
(5 answers)
Closed 3 years ago.
I ran into this problem while learning CSS. I tried to search for this but couldn't find any proper answers. Some lead me to margin collapsing, but it just doesn't happen to horizontal margins.
#nav-bar {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #be3144;
}
#nav-list {
display: flex;
margin-right: 4rem;
}
.nav-link {
text-decoration: none;
color: white;
padding: 0 1.6rem 0 1.6rem;
height: 60px;
weight: 100%;
display: flex;
align-items: center;
font-size: 1.3rem;
}
#welcome-section {
background-color: #3a3d40;
height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
margin-top: 60px;
}
<nav id="nav-bar">
<div id="nav-list">
About
Work
Contact
</div>
</nav>
<section id="welcome-section">
<h1>Hey I am Mimic</h1>
<h4>a web developer</h4>
</section>
The #welcome-section below nav-bar has blank space both left and right sides, though I didn't set any margin properties.
Also, any advices and suggestions in styling HTML/CSS are appreciated. Thanks in advance.
It's because the <body> of the page has margin as default.
Get rid of that by adding the below, and it should work...
body {
margin:0;
}
body {
margin:0;
}
#nav-bar {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #be3144;
}
#nav-list {
display: flex;
margin-right: 4rem;
}
.nav-link {
text-decoration: none;
color: white;
padding: 0 1.6rem 0 1.6rem;
height: 60px;
weight: 100%;
display: flex;
align-items: center;
font-size: 1.3rem;
}
#welcome-section {
background-color: #3a3d40;
height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
margin-top: 60px;
}
<nav id="nav-bar">
<div id="nav-list">
About
Work
Contact
</div>
</nav>
<section id="welcome-section">
<h1>Hey I am Mimic</h1>
<h4>a web developer</h4>
</section>