This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 months ago.
So I'm kind of a begginner and I just encountered a problem that I don't know how to solve.
Here is the code:
https://jsfiddle.net/upwaqyek/
.parent{
display: flex;
flex-wrap: wrap;
border: #000000 2px solid;
justify-content: center;
}
.parent div {
width: 300px;
height: 50px;
background-color: rgba(197, 197, 197, 0.788);
border: #000000 solid 2px;
border-radius: 10px;
margin: 10px;
transition-duration: 3s;
text-align: center;
align-items: center;
}
I can't center the text. I think it has to do with the width and height but it really doesn't move at all. The text just stays static there at the bottom of the div and doesn't do anything when I change the div height.
I want the text to be in the center of the div, both horizontally and vertically.
Just add this two properties to your .parent div. Of-course there are lots of ways to do this, but I'm writing answer base on your existing code.
.parent div {
// your others styles
display: flex;
justify-content: center;
}
.parent{
display: flex;
flex-wrap: wrap;
border: #000000 2px solid;
justify-content: center;
}
.parent div {
width: 300px;
height: 50px;
background-color: rgba(197, 197, 197, 0.788);
border: #000000 solid 2px;
border-radius: 10px;
margin: 10px;
transition-duration: 3s;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}
.parent div:hover {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="parent">
<a>
<div><h2>Text</h2></div>
</a>
<div><h2>Text</h2></div>
</div>
</body>
</html>
for the targeted div, add display: flex; to it, then to center its content horizontally, add justify-content: center; and to center its content vertically add align-items: center;
.parent{
display: flex;
flex-wrap: wrap;
border: #000000 2px solid;
justify-content: center;
}
.parent div {
width: 300px;
height: 50px;
background-color: rgba(197, 197, 197, 0.788);
border: #000000 solid 2px;
border-radius: 10px;
margin: 10px;
transition-duration: 3s;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.parent div:hover {
background-color: white;
}
<div class="parent">
<a>
<div>
<h2>Text</h2>
</div>
</a>
<div>
<h2>Text</h2>
</div>
</div>
You can center the text by making the container div a flexbox:
.parent div {
display: flex;
justify-content: center; /*center horizontally */
align-items: center; /* center vertically */
}
Your text is pushed down because h2 tags have a default not 0 margin (The margin varies between browsers).
It's not necessary, but I would recommend setting the margin value for header tags to 0.
h1, h2, h3, ... {
margin: 0;
}
Related
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:
How does the vertical-align property work?
(2 answers)
Closed 2 years ago.
I can't figure this out, it's suposed to put the boxes in the middle of it's container, but I can't make them move.
The idea is to center the inside the wrapper and to place them horizontally in the middle without having to fuzz around with margins or paddings and using veritcal-align.
#wrapper {
width: 1000px;
height: 1000px;
}
#container {
width: 900px;
height: 900px;
text-align: center;
display: inline-block;
background-color: lightblue;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
}
<div id="wrapper">
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</div>
I think you are looking for flexbox.
I have adapted your jsfiddle to fit
https://jsfiddle.net/ke4w58ra/
The folowing code is what I have changed to your #content element.
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
Essentially, setting the elements to display in the center horisontally (align-items) and vertically (justify-content). With a gap of 5px to space the boxes out.
For more information, look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Below is the integrated form of the JSFiddle
#container{
width: 100vw;
height: 100vh;
text-align: center;
display: inline-block;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0px;
}
<body>
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</body>
This question already has answers here:
How to Right-align flex item?
(13 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
How do I align the album cover div to the right inside the card. I tried with align-self: end property but that does not seem to work. Could anyone please help?
.card {
border: 1px red solid;
width: 450px;
height: 150px;
border-radius: 5px;
display: flex;
flex-direction: row;
}
.image {
width: 150px;
height: 150px;
align-self: end;
border: 1px solid green;
}
<div class="card">
<div>
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>
You can add justify-content: space-between; to your card's css:
.card {
border: 1px red solid;
width: 450px;
height: 150px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.image {
width: 150px;
height: 150px;
align-self: end;
border: 1px solid green;
float: right;
}
<div class="card">
<div>
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>
Flex has two main axis, if you want to align the album cover to the right in the main axis, you need to use the property justify-content: space-between; that will expand your music controls and album cover, with space-between ittems are evenly distributed in the line; first item is on the start line, last item on the end line, you can check more about flex here
I added a new class to the music controls and added a flex-grow value of 2 and align-self value of flex-start.
then for .image, i added align-self value of flex-end
at the end, i removed the hard-coded width/ height from image
Good luck!
.card {
display: flex;
flex-direction: row;
background-color: #005792;
width: 450px;
height: 150px;
border-radius: 5px;
overflow: hidden;
}
.music-controls{
display: flex;
flex-grow: 2;
}
.image {
display: flex;
flex-grow: 1;
background-color: #fd5f00;
}
<div class="card">
<div class="music-controls">
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to vertically align an image inside a div
(37 answers)
Closed 3 years ago.
I have already centered the div in the page using Flex and now I want to center the image in the div.
I feel like I am using to many properties in my original centering and do not know if I am doing it correctly.
https://jsfiddle.net/fLkz49nj/
#auth_top{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
#auth{
width: 250px;
height: 185px;
background: rgba(255,255,200,0.5);
box-shadow: 0px 1px 3px rgba(25, 25, 25, 0.4);
}
#auth_google_link{
width: 64px;
height: 64px;
display: block;
}
#auth_google_img{
width: 64px;
border: 1px solid white;
border-radius: 2px;
}
#auth_google_img:hover{
border: 1px solid black;
}
You can put #auth inside the flexbox and center it.
#auth_top{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
#auth{
width: 250px;
height: 185px;
background: rgba(255,255,200,0.5);
box-shadow: 0px 1px 3px rgba(25, 25, 25, 0.4);
display: flex; /* added style from here */
justify-content: center;
align-items: center;
}
#auth_google_link{
width: 64px;
height: 64px;
display: block;
}
#auth_google_img{
width: 64px;
border: 1px solid white;
border-radius: 2px;
}
#auth_google_img:hover{
border: 1px solid black;
}
<div id='auth_top'>
<div id='auth'>
<a id='auth_google_link' href="/auth/google">
<img id='auth_google_img' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDggNDgiPjxkZWZzPjxwYXRo%0D%0AIGlkPSJhIiBkPSJNNDQuNSAyMEgyNHY4LjVoMTEuOEMzNC43IDMzLjkgMzAuMSAzNyAyNCAzN2Mt%0D%0ANy4yIDAtMTMtNS44LTEzLTEzczUuOC0xMyAxMy0xM2MzLjEgMCA1LjkgMS4xIDguMSAyLjlsNi40%0D%0ALTYuNEMzNC42IDQuMSAyOS42IDIgMjQgMiAxMS44IDIgMiAxMS44IDIgMjRzOS44IDIyIDIyIDIy%0D%0AYzExIDAgMjEtOCAyMS0yMiAwLTEuMy0uMi0yLjctLjUtNHoiLz48L2RlZnM+PGNsaXBQYXRoIGlk%0D%0APSJiIj48dXNlIHhsaW5rOmhyZWY9IiNhIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+%0D%0APHBhdGggY2xpcC1wYXRoPSJ1cmwoI2IpIiBmaWxsPSIjRkJCQzA1IiBkPSJNMCAzN1YxMWwxNyAx%0D%0AM3oiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiNFQTQzMzUiIGQ9Ik0wIDExbDE3%0D%0AIDEzIDctNi4xTDQ4IDE0VjBIMHoiLz48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiMz%0D%0ANEE4NTMiIGQ9Ik0wIDM3bDMwLTIzIDcuOSAxTDQ4IDB2NDhIMHoiLz48cGF0aCBjbGlwLXBhdGg9%0D%0AInVybCgjYikiIGZpbGw9IiM0Mjg1RjQiIGQ9Ik00OCA0OEwxNyAyNGwtNC0zIDM1LTEweiIvPjwv%0D%0Ac3ZnPg=='/>
</a>
</div>
</div>
Hope it helps. Cheers!
you can do with positioning absolute but i guess that's not what you seek.
what you can do is
#auth{
text-align: center;
white-space: nowrap;
}
#auth:after {
content: '';
min-height: 100%;
display: inline-block;
vertical-align: middle;
}
#auth_google_link{
white-space: normal;
display: inline-block;
vertical-align: middle;
}
you should remove the display:block (to allow it to be centered) from the auth_google_link and then add a padding-top to the auth_google_img about the 22% (to move it down to the middle) and it should work perfectly