I have a div with a width of 465px, and I want to keep it centered when the page is resized. I can't manage to really center it when using a set width rather than using a %.
Example: I had used "margin-left: 40%;" but when the screen is small, the div gets pushed too far to the right (because it doesn't shrink with the screen), and when the page is full screen the div sits too far left.
You can do this:
div {
position: absolute;
left: 50%; // Position 50%
top: 50%;
width: 465px;
height: 465px;
margin: -232px 0 0 -232px; // - ( width / 2 ) to center and height
}
As long as you have a width set, simply use this in your CSS for consistent horizontal centering.
.name-of-div {
width:465px;
margin:auto auto;
}
Further.. if you would like it centered both horizontally and vertically take a look at this page which demonstrates the following CSS
.name-of-div {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
http://codepen.io/shshaw/full/gEiDt
also this should work margin:0 auto;
Related
I want to position a <div class="container"></div> in the middle of the screen in such a way so that it's responsive to any screen size. The red marked area on the screenshot should always appear in the middle of the screen.
How to position it? Currently I'm using margin-top:85px when I squeeze the browser, the distance between the red marked area and the navbar should decrease as well.
Have you tried absolute centering? You would need to add a position relative to the parent container... You would also need to declare a height on the container element...
.parent-container {
position: relative;
}
.container {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I hope this helps...
Working code snippet has been added. This code will centre your div both horizontally and vertically for any screen size.
Set the css property position:relative for parent of the container.
.container {
width: 400px;
height: 300px;
background-color: #ccc;
position: absolute;
/*it can be fixed too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width: 100%;
max-height: 100%;
overflow: auto;
}
<div class="container">
</div>
Try with this example
.container {
width: 75%;
margin: 50px auto 0;
}
Define some width on your container and set margin top & bottom to some desired value and left & right values to auto so that it will always split the remaining space on the both sides equally.
.container{
width : 84%
margin : 2rem auto;
}
Use this in your container class
.container{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:auto;
height:200px; /****set height****/
margin:auto;
}
It will work
I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
I have two divs: menu and content. Menu is fixed on the left, and content is centered. The problem is that with lower screen resolutions, the menu overlaps the content.
Here's some css:
#content {
width: 1000px;
min-height: 100%;
margin: 0 auto;
}
#menu {
z-index: 20;
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
So, basically, I want the content to be centered with a left minimum of x px.
Is there an easy solution for that?
just set up a Wrapper div parent to the content div... and give the wrapper margin-left: 100px; or however much you want.. simple as that
you could use min-width
That should be the easiest solution. Otherwise post your code on http://jsfiddle.net/ so we can review it
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>
I am trying to create a HTML page slider, so I have my container div, then sitting on the outside, on the left I have a Previous Icon and on the right I have a Next icon.
My problem is, when I resize the window to smaller screens the icons move into the center of my container, I want them to stay position fixed to the outside of the container at all times when resized.
My container code: -
width: 960px;
margin: 0 auto;
clear: both;
overflow: hidden;
min-height: 449px;
Next and previous code:
a.vehicleSliderLeft {background: url('../img/slider_arrow_left.png');
width: 55px; height: 112px; left: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
a.vehicleSliderRight {background: url('../img/slider_arrow_right.png');
width: 55px; height: 112px; right: 270px; background-position:0px;
background-repeat: no-repeat; position: fixed; top: 420px;}
Any ideas? cheers
You need to give the main container position: relative and then position the arrow elements inside the container with position: absolute.
This then allows you to manipulate where you put both arrows on the page using right: x , left: x , top: x , bottom: x. where x is any number or percentage.
jsFiddle: http://jsfiddle.net/LZG3R/3/
Source: Learn CSS Position in Ten Steps
You should try something like this:
.container{
width: auto;
margin: 0 auto;
clear: none;
}
a.vehicleSliderLeft {
float: left;
}
a.vehicleSliderRight {
float: right;
}
Fiddle: http://jsfiddle.net/EhdkP/1/
inside a main div you can keep each element in separate divs specifying the positions of each div specifying the widths in percentage