This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How to vertically align an image inside a div
(37 answers)
How can I vertically align elements in a div?
(28 answers)
Center image using text-align center?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
So I'm trying to center my image and my button which is in the first and last div of my container-1 div. Howvever it doesn't seem to want to center and I don't understand why. I'd love to know why it's not centering and how to center it peoperly.
.container-1 {
display: flex;
}
.container-1 div {
border: 1px #ccc solid;
padding: 10px;
}
.container-1 .body {
flex-grow: 1
}
.container-1 .box-img img {
align-items: center;
height: 75px;
}
.container-1 .box-button button {
align-self: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">
<div class="box-img">
<img src="https://images.squarespace-cdn.com/content/5c2aec4b1137a6d8849debf1/1589482673361-JFOXBM38XYSJQ9MUBEDW/image-asset.jpeg?format=1000w&content-type=image%2Fjpeg" />
</div>
<div class="body">
<h3>Title</h3>
<p>Description</p>
</div>
<div class="box-button">
<button class="btn btn-primary">Button</button>
</div>
</div>
Basically, you want to use:
display: flex;
align-items: center;
On a parent element. That will vertically center the children.
Have a look - working code below.
.container-1 {
display: flex;
}
.container-1 div {
border: 1px #ccc solid;
padding: 10px;
}
.container-1 .body {
flex-grow: 1
}
.box-img {
display: flex;
align-items: center;
}
.box-img img {
height: 75px;
}
.box-button {
display: flex;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">
<div class="box-img">
<img src="https://images.squarespace-cdn.com/content/5c2aec4b1137a6d8849debf1/1589482673361-JFOXBM38XYSJQ9MUBEDW/image-asset.jpeg?format=1000w&content-type=image%2Fjpeg" />
</div>
<div class="body">
<h3>Title</h3>
<p>Description</p>
</div>
<div class="box-button">
<button class="btn btn-primary">Button</button>
</div>
</div>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 days ago.
So I’ve tried centering a div, but only the children get effected.
What am I doing wrong?
Here’s my current code:
<div class="card">
<img src="images/image-equilibrium.jpg" alt="Image">
</div>
And my CSS:
.card {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: black;
}
Here’s what’s actually happening:
Use the flexbox on the parent, not on the div you want to center:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 200px;
height: 200px;
background-color: black;
}
<div class="parent">
<div class="card">
<img src="images/image-equilibrium.jpg" alt="">
</div>
</div>
If you want to keep the HTML structure (not inserting parent), you could just use the horizontal margin auto like this:
.card {
width: 200px;
height: 200px;
background-color: black;
margin: 0 auto;
}
<div class="card">
<img src="images/image-equilibrium.jpg" alt="">
</div>
EDIT: OP wants to center it both vertically and horizontally.
If you want to do that, you need to modify the most top parent as well (the <body> tag) and make its height 100%, like this:
body {
height: 100vh;
margin: 0;
}
.parent {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 200px;
height: 200px;
background-color: black;
}
<div class="parent">
<div class="card">
<img src="images/image-equilibrium.jpg" alt="">
</div>
</div>
The properties justify-content and align-items were applied for the children of .card. If you want to center the .card you will have to set the display property to flex for the parent of .card. or if the .card has a fixed width which in your case it has, you can also set the margin-x:auto on the .card, by doing so it will be aligned at the center of it's parent container. Hope I was able to make you understand.
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 vertically align elements in a div?
(28 answers)
Closed 1 year ago.
My question is simple, how I'm able to vertically center divs in my navbar so they will be always in the center no matter what height of the navbar i set. I have already tried vertical-align: middle; but that didn't work for me.
HTML:
<div class="navbar">
<div class="buttons">
<button class="homeButton"><i class="fas fa-home"></i></button>
<button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
</div>
<div class="links">
Programování
Anglický jazyk
Psychologie
Zdraví a psychohygiena
Matematika
Logické úlohy
Programy
Ostatní
</div>
</div>
CSS:
.navbar {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 10px 10px;
width: 100%;
height: 100px;
font-family: Open Sans;
background: white;
position: fixed;
}
.buttons {
float: left;
}
.links {
float: right;
}
using float for this is a deprecated solution, better to do it like this:
.navbar {
display: flex;
justify-content: center;
align-items: center;
}
You could try to place the items halfway down a div. e.g.
.verticalCenter {
top: 50%;
}
then just add it to the buttons div.
<div class="buttons verticalCenter"> <!-- added here -->
<button class="homeButton"><i class="fas fa-home"></i></button>
<button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
</div>
You can use flexbox.
.navbar {
/*rest of your code*/
display: flex;
justify-content: center;
align-items: center;
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I Have Div with a div and a p tag within it. I need the inner div (customImage) to be on the left while the text is next to it but centered.
here is the HTML
<div class="custom_hdr">
<div class="customImage">
</div>
<p>WITH PAD</p>
</div>
You can _use flex and align-items: center; to achieve it.
.custom_hdr {
display: flex;
/* justify-content: center; */
align-items: center;
background-color: aliceblue;
max-width: 250px;
justify-content: space-between;
padding: 10px;
}
.customImage {
width: 100px;
background-color: #dedeb9;
height: 100px;
}
img.user_pro {
width: 100%;
}
<div class="custom_hdr">
<div class="customImage">
<img src="https://graph.facebook.com/10212529711337983/picture?type=large" alt="" class="user_pro">
</div>
<p>WITH PAD</p>
</div>
Add display:flex in your custom_hdr class
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I have a parent and it has icons with text that I distributed using display: flex, but now the problem is. How do I make a block with icons in the center of the parent? I tried different ways that I found on the Internet, but they don't work as I understand because of display: flex
.icons {
margin: auto 250px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
<div class="service">
<div class="icons">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>
Your CSS value justify-content: space-between; was wrong for aligning it in center.
.icons {
margin: auto 250px;
display: flex;
flex-direction: row;
justify-content: center; /* you gave this wrong value */
align-items: center;
}
/* Demo */
img {
border: 1px solid #000;
}
.service {
border: 1px solid red;
}
<div class="service">
<div class="icons">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
This question already has answers here:
How do I center floated elements?
(12 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm just wondering why margin auto isn't working? my parent div margin auto works but my inner margin auto is not in center.
.rankings_page{
width: 750px;
background-color: #f5f5f5;
margin: auto;
height: 800px;
}
.tab-group {
margin: auto;
}
.toggle_btn{
background-color: blue;
float: left;
width: 30%;
text-align: center;
cursor:pointer;
}
<div className="rankings_page">
<div className="tabgroup">
<div className="toggle_btn">
Country
</div>
<div className="toggle_btn">
City
</div>
</div>
</div>
</div>
Thanks!
The margin: auto trick only works if you want to horizontally center your elements. It will not work to vertically center your elements, because of how CSS deals with vertical margins differently.
You should use CSS flexbox instead: it is specifically made to allow layouts like this possible:
display: flex;
align-items: center;
justify-content: center;
Also, you need to update the tabgroup selector, because there is no - in the class in your markup. See proof-of-concept example:
.rankings_page {
width: 750px;
background-color: #f5f5f5;
height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.tabgroup {
display: flex;
}
.toggle_btn {
background-color: blue;
cursor: pointer;
}
<div class="rankings_page">
<div class="tabgroup">
<div class="toggle_btn">
Country
</div>
<div class="toggle_btn">
City
</div>
</div>
</div>