I am trying to get a page layout like the following
Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page
This works great in all browsers except ie6 and ie7.
Can any one help me how to fix this? I am a server side developer and new to front end. I did some searching but could not found the solution.
Thanks for you help in advance.
Centering vertically with CSS can be a pain. Check out Dead Centre. It requires an extra container 'horizon' to know where the vertical center is, and unfortunately you must know the dimensions of the content you want centered so that you can offset it.
Goes something like this...
body {
margin: 0px
}
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
<body>
<div id="horizon">
<div id="content">
content you want centered
</div>
</div>
</body>
.centered {
background-color: red;
width:50px;
height:50px;
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
<div class="centered">
This no longer works well on Chrome 38. Try loading the dead center site above and resizing the browser - see the distortion in the text.
Related
I have a link and i want that it is always at the bottom of the page. I tryed display: flex and align-items: flex-end but the problem is the div isn't going till the bottom of the page. I could just do margin-top: 375px but I want that it is at the bottom at a phone and a computer can someone help?
sorry for my bad english
This is what you're looking for:
Like others said, bottom: 0 and position: fixed is what you need.
width: 100% will stretch the div across the page.
When you add fixed to an element, it then becomes independent of all other elements, which makes it tricky to position. I added left: 50%; and transform: translate (-50%, 0); it helps center the element to the page.
Source: (Center aligning a fixed position div)
div.bottom-nav {
background-color: #232323;
width: 100%;
height: 55px;
line-height: 55px;
text-align: center;
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
a {
color: white;
}
<div class="bottom-nav"><a href=#>Click me</a>
</div>
I would try adding this to the element you want to stick to the bottom.
position: fixed;
bottom: 0;
This question already has answers here:
Center a DIV horizontally and vertically [duplicate]
(6 answers)
How to center an element horizontally and vertically
(27 answers)
Align div horizontally and vertically center to a page (responsive) [duplicate]
(3 answers)
Closed 3 years ago.
I'm trying to center all my content by using a div, but every time I use a center code my content completely goes askew.
I tried using this code
position: relative;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;
But that causes my content to snap to the far right. I'm not sure what I'm doing wrong but it might have something to do with my class styles.
Here's a part of the code I'm using. I'm making a website for my class!
CSS:
.centercontent {
position:relative;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;
}
.front {
position:absolute;
top: 50px;
left:800px;
z-index: 2;
}
HTML:
<div class="centercontent">
<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" />
</div>
I think using Z-index is causing the code to act wonky, but I have to use the Z-Index to align all the pieces in my total code. If it's not the Z-Index, then I have no idea what could be wrong.
My end goal is to have the content be centered no matter what size computer its being viewed on. I want the images to be the same scale not matter how big the computer is and if the computer is smaller, have the images be smaller. And no matter what, it'll stay centered on the screen.
Any help is greatly appreciated!
there is a lot of way to center things in css.
you can see some tips and explication here : tips to center
z-index dont causing align bug :)
For you exemple, just add a transform: translate(-50%, -50%) to your container.
You can see your code with the modification just below
.centercontent{
position:absolute;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;
border:2px solid tomato;
transform: translate(-50%, -50%);
}
<!Doctype html>
<html>
<head>
</head>
<body>
<div class="centercontent">
<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >
</div>
</body>
</html>
You need to give style to your main div, which is "centercontent" and remove additional styling from your image. So, your whole code will look like this.
<!Doctype html>
<html>
<head>
<style>
.centercontent {
text-align: center;
position: relative;
max-width: 100%;
}
.front {
z-index: 2;
}
</style>
</head>
<body>
<div class="centercontent">
<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >
</div>
</body>
</html>
To center the container on any screen size you can use the following code.
.centercontent{
margin: 0 auto;
width:50%; // You can put any width to the container.
}
What you've done is almost correct. But you've got muddled with your attempt to horizontally align objects.
The easiest way to horizontally align on a block level element:
text-align: center;
To vertically align:
position: relative;
top: 50%;
transform: translateY(-50%);
Here's a working example: https://jsfiddle.net/yorjk2h7/
.centercontent{
position:relative;
width: 100%;
height: auto;
display: block;
text-align: center;
}
.front {
max-width: 100%;
z-index:2
}
hope this is what you need
try this code in your css
.centercontent {
max-width: 100%;
height: auto;
}
.front {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
I have an image I want to have come out of the website from the left and right side. See the image for what I have so far.
I managed to get it to work by giving the div the image on the left is in a position absolute and a left of -30px, but when I do the opposite for the image on the right (aka position:absolute and right:-30px), the image doesn't get cut off like it does on the right side.
Instead, the page get wider to have space for the image on the right. I have no idea as to how to get this to work and I also don't really know how to word this issue and my searches have come up barely anything to do with what I'm trying to find.
Below the HTML for both sides:
<div class="imgdecalleft">
<img src="images/img/patroon.svg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="images/img/patroon.svg" alt="patroon">
</div>
And the subsequent CSS:
.imgdecalleft {
width: 15%;
position: absolute;
left: -30px;
}
.imgdecalright {
width: 15%;
position: absolute;
right: -30px;
}
Add this:
body {
overflow-x: hidden;
}
Here is an alternate approach that relies on setting the image width to the width of the container div and then offsetting the image inside the container. Using overflow in this case only effects these divs and their images.
This should still allow the page to be scrollable horizontally on narrow screens.
.imgdecalleft {
width: 30%;
position: absolute;
left: 0px;
overflow: hidden;
}
.imgdecalleft img {
width: 100%;
position: relative;
left: -50%;
}
.imgdecalright {
width: 30%;
position: absolute;
right: 0px;
overflow: hidden;
}
.imgdecalright img {
width: 100%;
position: relative;
left: 50%;
}
<div class="imgdecalleft">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
I have the following html:
<div class="fix-to-top">
<div class="background-image"></div>
</div>
I want to be able to fix the position of the image to the top of the page -- so that it is always at the top of the page no matter how far down the user scrolls. In addition, I want the image to always stay in the center of the page, so if a user re-sizes his browser, the image stays in the center. Here is what I tried, but wasn't getting the result:
.fix-to-top {
position: fixed;
top: 0px;
width: 2000px;
}
.fix-to-top .background-image {
margin: 0 auto;
}
However, the side margins aren't doing 'auto'. How would I correctly do this?
img {
position: fixed;
right: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-right: -50px;
background: orange;
top: 50%;
}
http://jsfiddle.net/jXdxr/1/
Check this fiddle
No need of using two div's
You can use background-attachment and background-postion properties to achieve it
I am making a photography website, the size of page is about 960x780, and i want the page to remain in the center (vertically and horizontally) of the window, wether we zoom in or out of the page.
I tried, but I'm facing problems with positioning.
Can anyone please tell me the answer?
You need to use position: absolute; to bring your page, better to describe it as a div/container in center horizontally/vertically...
Like This
.center {
width: 960px;
height: 780px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px; /* Half of the total width */
margin-top: -390px; /* Half of the total height */
}
and if you want to center it just vertically you can do it like this :
HTML
<div class="mainwrapper">
<div class="innerwrap">
<div class="content">
Your content
</div>
</div>
</div>
CSS
.mainwrapper {
display:table;
}
.innerwrap {
display:table-cell;
vertical-align:middle;
}