This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
HTML
<div class="wrapper">
<div class ="content">
<div id="container">
</div>
</div>
</div>
CSS
.wrapper {
width: 1000px;
}
.content {
width: 100%;
text-align: center;
}
#container {
display: flex;
margin-left: auto;
margin-right: auto;
}
Output: https://gyazo.com/c36c7049e68c46ea617391b5dd93b81f
I'm importing data from an XML file and trying to centre the data within the content div but, the images keep going over the page and I have no clue why. Any help or research links would be appreciated, cheers.
You simply need to set justify-content to the value of center.
If you are not too steady using flexbox, I really recommend this interactive game to learn how to master flex: flexbox froggy
.wrapper {
width: 1000px;
}
.content {
width: 100%;
text-align: center;
}
#container {
display: flex;
justify-content: center;
}
span {
height: 50px;
width: 30px;
background-color: salmon;
margin: 0 20px;
}
<div class="wrapper">
<div class="content">
<div id="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</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:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 10 months ago.
<div style="height: 100%; background: red">
<div style="height: 100px; background: green">
</div>
<div style="background: blue;">
<h1>Content</h1>
</div>
</div>
How to put content of blue box to center of free plase of red block.
Parent block must have height 100%.
Like this:
Flex box would be good for this issue.
* {
margin: 0px;
padding: 0px;
}
.h {
height: 100px;
background: green;
}
.m {
background: blue;
color: white;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 100px);
}
<div class="w">
<div class="h">header</div>
<div class="m" >
<h1>Content</h1>
</div>
</div>
You should read about flex-box since it will make your life much easier when it comes to such alignments and I am sure you wont regret it. (https://www.w3schools.com/css/css3_flexbox.asp)
(Additional resource for flex-box, my personal favorite: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Please let me know if this isn't the desired outcome and I will try to fix it according to your request.
.parent {
height: 100%;
background: red;
}
.header {
height: 100px;
background-color: green;
}
.content {
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
<div class="parent">
<div class="header">
</div>
<div class="content">
<h1>Content</h1>
</div>
</div>
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 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:
Html element is not vertically centered with flex center
(2 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 years ago.
I am working on the fiddle in which I want to vertically centered text in css.
The HTML code which I have used in order to built the fiddle is:
<div class="poster text-center pt-4">
<div class="item">
<img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<div class="poster_name_location">
<p class="mb-0">posted by,<span style="color:#ff8b5a;">hello</span></p>
<p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
</div>
</div>
Problem Statement:
I am wondering what CSS codes I need to add in the fiddle so that text comes at the center of an image.
I tried adding the following css code but it doesn't seem to work.
.poster_name_location
{
middle
}
You can achieve that using flex-box & align-items: center.
.item_poster_image {
height: 120px;
width: 120px;
-o-object-fit: contain;
object-fit: contain;
max-width: 100%;
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.item {
padding: 0;
margin: 0px 10px 0px 10px;
}
.poster {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.poster_name_location {
text-align: left;
display: block;
justify-content: center;
}
.text-center {
align-items: center;
}
<div class="poster text-center pt-4">
<div class="item">
<img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<div class="poster_name_location">
<p class="mb-0">posted by, <span style="color:#ff8b5a;">hello</span></p>
<p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
</div>
</div>