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
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)
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>
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>
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.
My question is simple, I have a <div> with two <p> tags inside of it, I want one centered vertically in the <div> and the other to be at the bottom, is there a simple and clean way to achieve this?
Here is the code: https://jsfiddle.net/xpm7fsoh/
.App {
display: flex;
text-align: center;
}
.Container {
color: #fff;
background-color: red;
padding: 50px;
display: flex;
height: 50vh;
}
.One {
display: flex;
align-items: center;
}
.Two {
display: flex;
align-items: flex-end;
}
<div class="App">
<div class="Container">
<p class="One">Hello</p>
<p class="Two">World</p>
</div>
</div>
This question already has answers here:
Vertically align text next to an image?
(26 answers)
How can I vertically align elements in a div?
(28 answers)
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 3 years ago.
Say I have the following code
p {
display: inline;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
<p>
Some text
<div>
</div>
</p>
What is created is this
Here the inline and inline-block elements are not vertically centered.
How would I make it look like this :
I have used flex css and also add one new div
I hope this will help you.
p {
display: inline;
margin: 0;
}
.inner-div {
display: inline-block;
width: 100px;
height: 50px;
background: black;
}
.outer-div{
display: flex;
align-items: center;
display: -webkit-flex;
-webkit-align-items: center;
}
<div class="outer-div">
<p>Some text</p>
<div class="inner-div"></div>
</div>
just add float left to tag
p{
display: inline;
float:left;
}
This will align both element properly