This question already has answers here:
Using margin:auto to vertically-align a div
(15 answers)
Why don't margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?
(2 answers)
Closed last year.
I think I've got some confusion on how margin auto works. In this case, I'm creating a parent div and a children div inside of it, and both div boxes are given width & height. Then, I tried to use margin auto to make the inner div horizontally & vertically aligned.
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 200px;
height: 200px;
background: red;
}
#child {
width: 50%;
height: 50%;
background: blue;
margin: auto;
}
Result:
Somehow the result was out of my expectation. Anyone knows why?
Just use display: flex
#parent {
width: 200px;
height: 200px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#child {
width: 50%;
height: 50%;
background: blue;
}
<div id="parent">
<div id="child"></div>
</div>
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I make my flexbox layout take 100% vertical space?
(4 answers)
Closed 9 months ago.
I have a div of height 100%. Inside that div, there are two children: an <a> and another <div>. The child <div> also has a height of 100%. I expected setting the child div's height to 100% would make it fill up the remaining height, not copy the height of the parent element and disregard fellow children leading to unintended overflow.
Example: https://codepen.io/gamepro5/pen/Jjpaqva (why is the child class in this example overflowing it's parent with a height of 100%?)
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
height: 100%;
}
.child{
height: 100%;
width: 75%;
background-color: green;
/*would need to do a calc of 100% minus whatever the height of the <a> tag is, but that is annoying to do since the height of the other items can change. */
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
I simply want the child div to fill up the remaining available space with it's height without overflowing.
You can achieve this with flex: Set display: flex and flex-flow: column; on the parent element, and on the child set flex-grow: 1;
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
display: flex;
flex-flow: column;
height: 100%;
}
.child{
flex-grow: 1;
width: 75%;
background-color: green;
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
// css
.table-art {
background-image:url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
}
// html
<div class="table-art">
<div class="box-test">
</div>
</div>
The red box is placed like this when I use the css. However, if I'm not wrong, due to the 'margin: auto' it should superposition the box, from left right down and up within the div with the picture, however it only seems to be doing it for left and right, horizontally it works fine, however I want to have this box vertically centered as well.
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
}
I tried to have it centered using the ol' top and left 50%. Which in theory should put it straight in the center. However, as you can see, it's slightly off to the down and right. Increasing the size of the box div will always go right and down, but it doesn't seem to take into account the left and upper part of itself.
I tried also using right and down: 50% but it's always in that particular location. It's like the website thinks this is really the center, is it due to the image?
I've tried looking at different solutions such as using padding but that didn't work either, what should I do to make sure it's box size always remains in the center within this filled out div?... Or, is there a better way to doing this and I'm just hurting myself for nothing? What's the deal here?
*The image's size in question is 765x510
Also using firefox navigator, but chrome also does the same thing.
Thank you for reading, any help will be very much appreciated!
You could use flex or grid - like
.table-art {
background-image:url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
/* center items */
display: grid;
place-items: center;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
}
Add display flex to the parent div and then margin:auto to the inner div
CSS
METHOD 1 :
By using the position relative for parent div and absolute for child element you can easily cneter the child element using top and left props of css ( of child with absolute position ) as 50% and finally center the child element with transform prop
/*Using positioning and transform method*/
.table-art {
background-image: url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
background-color: blue;
position: relative;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50% , -50%);
}
METHOD 2 :
Using the grid or flex you can easily center the child div by setting the parent div's display to flex or grid and then using the justify-content ( for flex and place-content for grid ) and aligning the div vertically center with align-items to center ( grid doesn't needs this prop to center the content ! )
/*Using flex or grid to center the content*/
.table-art {
background-image: url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
}
HTML
<div class="table-art">
<div class="box-test">
</div>
</div>
Just add below to your .table-art class
display:flex;
align-items: center
.table-art {
background-image: url("https://picsum.photos/300/300");
background-size: cover;
width: auto;
height: 500px;
display:flex;
align-items: center
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
}
<div class="table-art">
<div class="box-test">
</div>
</div>
I have a div-container (colored blue) where I want to put 3 div-elements (colored red).
div-elements have to be vertically aligned (I just used margin-top: 10%; for that) and first one has to be left, second centered and third right in the same line. To achieve that I have made 3 ids #left, #center and #right.
However it all gets messed up when I put those ids in. First one is aligned allright, second one is centered but margin-top: 10%; doesn't affect it anymore and the third one is on the right side but in the new line.
I have tried putting display: inline-block; in my div-element class. This aligns right element correctly but messes up the center one.
Why is this happening and how do I solve this?
It is quite obvious that I have tried How to align 3 divs (left/center/right) inside another div? since I have used exact same ids, but the above mentioned solution doesn't work here and I have specifically asked why my margin-top: 10%; in .div-element doesn't affect center div
.div-container {
width: 50%;
height: 50%;
background-color: blue;
}
.div-element {
margin-top: 10%;
width: 20%;
height: 50%;
background-color: red;
}
#center {
margin: 0 auto;
}
#left {
float: left;
}
#right {
float: right;
}
<div class="div-container">
<div class="div-element" id="left">Left</div>
<div class="div-element" id="center">Center</div>
<div class="div-element" id="right">Right</div>
</div>
I would suggest using flexbox for this:
.div-container {
width: 50%;
height: 50%;
background-color: blue;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.div-element {
margin-top: 10%;
width: 20%;
height: 50%;
background-color: red;
}
<div class="div-container">
<div class="div-element">Left</div>
<div class="div-element">Center</div>
<div class="div-element">Right</div>
</div>
One of the easiest way for me to do this would be to use CSS grid to position the columns
<style>
.div-container {
display:grid;
grid-template-column: 3, 1fr;
width: 50%;
}
</style>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?
div {
height: 400px;
width: 800px;
background: red;
}
<div>
<h1>This is title</h1>
</div>
you can use display flex it enables a flex context for all its direct children, and with flex direction establishes the main-axis, thus defining the direction flex items are placed in the flex container
div{
height: 400px;
width: 800px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
Just do this, which works on every browser:
div{
height: 400px;
width: 800px;
background: red;
line-height: 400px;
text-align: center;
}
The line-height property specifies the line height (which centres it vertically), and the text-align:center place it directly in the centre horizontally.
<div>
<style>
div {
position: fixed;
top: 50%;
left: 50%;
}</style>
<h1>This is title</h1>
</div>
With position: fixed you set the position to a fixed value, and with top and left both set to 50% you'll get it in the middle of the screen.
Good luck coding!
Here is some more information: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
.container {
display: table;
}
.centered {
display: table-cell;
height: 400px;
width: 800px;
background: red;
text-align: center;
vertical-align: middle;
}
<div class="container">
<div class="centered">
<h1>This is title</h1>
</div>
</div>