This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
I am creating a website and I have a div which sets the main (called page) and max width of the main content. How would I in CSS set another div to be 50% of the page so it will always be centred. Thanks.
Main content Div:
#page{ /* Sets page width and colour*/
margin-left: 200px;
min-width: 400px;
max-width: 982px;
background-color: #FFFFFF;
padding-bottom: 5px;
}
EDIT:
<div class="Serverimg">
<div class="CenterDiv">
<img src="C:\Users\Corey\Documents\Web Project\images\serverroom.jpg" class="ServerRoom" alt="" style="width:400px;height:300px": />
</div>
</div>
WITH CSS:
#CenterDiv {
width: 50%;
margin: 0 auto;
}
To do this you put another div inside of it and add the following CSS:
#centerDiv {
width: 50%;
margin: 0 auto;
}
What you are doing is telling the centerDiv to always be 50% of the width of page and then assigning it equal margins on either side so it floats in the center.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
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 4 months ago.
Here is code:
.HUD {
height: 100%;
width: 100%;
overflow: hidden;
}
.Smart_HudWarp{
display: block;
height: fit-content;
margin-top: auto;
margin-bottom: auto;
}
<div class="HUD">
<div class="Smart_HudWarp">
some elements....
</div>
</div>
I'm trying to center div inside another one, the problem is - margins doesn't show up, what i'm missing?
Although it's hard to say without the rest of the content of your html and css, i suspect the reason the auto is not working is because 100% is not considered a "static" height or width for the parent div. Margin auto doesn't actually assign a value to the margins. Instead, it allows the browser to choose the values for the margin. Browsers assign the values margin-top: 0; margin-bottom: 0; and then horizontally center the object within the parent when the shorthand property margin:auto; is given. So when you specify margin-top: auto; margin-bottom: auto; all that's being assigned is margin-top: 0; margin-bottom: 0;
a simple solution would be to use flexbox. I personally don't like using position: relative/absolute because it can be quite finicky, but that's just me. Note that flexbox comes with its own quirks, too.
.parent {
background: navy;
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh; /* this makes the height a "static" value, while also covering a height equal to the whole height of the viewport */
width: 100%;
}
.child {
background: pink;
padding: 4vh;
}
<div class="parent">
<div class="child">
Hello World!
</div>
</div>
This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
What is a clearfix?
(10 answers)
Closed 2 years ago.
I have always had this problem and I avoid floating div's because of this problem. The code seems to work but when you inspect the code in Google's developer tools it shows that the Main div is 0px tall. the problem I have with this is what if I want the Main div to have an image or a color. The solution I found to getting this to work is applying a float to every div so Main would also get a float but floating the Main div will break the centering of the main container. Does anyone know of a way to fix the two divs going outside of the main div?
.float-left {
float: left;
}
.float-right {
float: right;
}
main {
width: 100%;
height: auto;
background-color: darkgray;
}
.div1 {
height: 200px;
width: 50%;
background-color: darkgreen;
}
.div2 {
height: 200px;
width: 50%;
background-color: darkblue;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet" type="text/css">
<main>
<div class="div1 float-left"></div>
<div class="div2 float-right"></div>
</main>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I wanted to make an inline div using inline-block, but it doesn't work and either turns it turns one of the two divs below and the other above
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 600px;
display: inline-block;
margin: 5px;
}
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
I also tried giving #div-on-the-left inline-block too, that brought #big-div-on-the-right above, but left a gap where #div-on-the-left was supposed to be and brought #div-on-the-left to the bottom, why is this happening?
YOu would be way better off using a grid or flexboxes. In this case flexboxes would be "easier" and "shorter". You main issue is, that both div-boxes have a different height. The left div-box have a height of 600px + (2x20px) = 640px because of the double border. the right div-box have a height of only 600px causing different line height and therefor will cause a line-break. Next, the minimum-width has to be set large enough to allow both boxes to be displayed next to each other.
In the snippet below, I wrapped both boxes inside a wrapper with a minimum width high enough to let them be displayed next to each other. Then I changed them to display: flex;.
The height for the right box was set to 640px becaue of the border mentioned above.
.wrapper {
min-width: 850px;
display: flex;
}
#div-on-the-left {
background-color: #464886;
width: 200px;
height: 600px;
padding: 10px;
border: 10px double #2c2d54;
margin: 5px;
}
#big-div-on-the-right {
background-color: #AAABB8;
width: 600px;
height: 640px;
margin: 5px;
}
<div class="wrapper">
<div id="div-on-the-left">
<!--Some html-->
</div>
<div id="big-div-on-the-right">
<!--Some html-->
</div>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
I need to align container in the centre as well as in the middle of the body.
If I add margin-top it adds a white space above the container div and shifts the background image downwards too.
I would prefer everything in percentage.
body {
margin: 0px;
height: 100%;
background-image: url("../Images/LogIn/Background.jpg");
background-size: 100% 100%;
}
html {
height: 100%;
}
.Container {
margin: auto;
width: 60%;
height: 80%;
background-color: white;
border-radius: 20px;
}
<div class="Container">
</div>
Put the following styles on the bottom to align your child div in the center:
body {
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin:auto;
width: 50%
}
Any container with a width and relative position when styled with margin auto will automatically center inside a relatively positioned parent div (like body) - if it has content.
<style>
.container{
margin:auto;
width: 50%;
background-color: grey;
}
</style>
<body>
<div class="container">
<p> text </p>
</div>
</body>
Also as a sidenote, you should avoid styling the body at all.
This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
If static positioned elements are not affected by the top, bottom, left, and right properties, why does the box move along with the container when I change the margin-top value of the box element?
I have kept my code at: https://jsfiddle.net/b9rtwkq7/5/
HTML:
<div class="container">
<div class="box">
</div>
</div>
CSS:
.container
{
width:500px;
height: 500px;
background-color: grey;
margin-top: 00px;
}
.box
{
width:100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
The margins are collapsed in the jsfiddle you posted: https://www.w3.org/TR/CSS2/box.html#collapsing-margins
Add overflow: auto/hidden to .container or use the following css which I've added in a class called .no-collapse myself:
.no-collapse:before {
content: "";
display: table;
}