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;
}
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I am trying to center the disc in the middle of the page overlapping my left and right div. The way I have found to do it is using the below code however, the disc shoots off the page to the right when I do. Please can someone help me understand why as I have googled and watched YouTube videos and they say this is how you do it. It is even working in the YouTube video but not for me. I am really stuck.
body {
margin: 0;
}
.container {
height: 100vh;
display: flex;
}
.left {
width: 50vw;
display: relative;
background-color: #abc;
}
.right {
width: 50vw;
background-color: #687;
}
.disc {
width: 16em;
height: 16em;
border-radius: 50%;
background-color: black;
position: absolute;
top: 50%;
right: -8em;
transform: translateY(-50%);
}
<div class="container">
<div class="left">
<div class="disc"></div>
</div>
<div class="right"></div>
</div>
If I understood correctly you want to position the disc in the middle horizontaly.
If that's the case, you can use the right property in conjunction with the CSS calc function to get the desired behavior, like this:
...
.disc {
...
right: calc(50vw - 8em);
...
}
...
Where vw stands for viewport width and 8em is half of the disc width.
You can see the complete code here.
To position a child element, the parent element need to have a position attribute (position: relative; atleast) for its childs to inherit. That is why your .disc element went off to the right.
So simply add
position: relative;
to the parent elements, the .left and .right class
I hope this helps
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I want to center a div in the absolute center of the page with justify-content: center and align-items: center but the div needs to be the 100% width and height of the page to be in the absolute center.
The problem arrives when you add elements on top or at the bottom of the div, this reduces the height of the div that we want to center and is no longer at the absolute center.
Here is the page https://jsfiddle.net/nybf8tjc/1
I could just add
.typewriter{margin-top: -41px;}
to fix this but I feel like there is must be a better way to do this.
You can make .typewriter an absolutely positioned element and add the usual settings for centering that, like
.typewriter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
etc.
}
In action: https://jsfiddle.net/de3rf65j/
You can simple achieve it by using this.
div.father {
width: 100vw;
height: 100vw;
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
}
div.father div.child {
width: 400px;
height: 250px;
background-color: teal;
position: relative;
}
<div class="father">
<div class="child"></div>
</div>
Also you can use the transform property:
div.child {
width: 400px;
height: 250px;
margin:0;
padding: 0;
background-color: teal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
That should center the container you want to.
Take a look https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm having a hard time solving the following problem:
I'm trying to position a few pictures in the following manner:
They all take the whole width of the screen (I know their number)
The sequence of pictures is aligned in the middle vertically
I have found this answer, but it's not too helpful, as it allows centering only one image.
Also, vertical-align won't help much, since it only positions inline elements.
Here's my working example:
https://jsfiddle.net/3psbtqxv/1/
body {
padding-top: 5%;
position: absolute;
vertical-align: middle;
}
img {
max-width: 20%;
height: auto;
}
<body>
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</body>
I would appreciate some help.
First google search of "css position center of page" gave me this result:
Quick CSS Trick: How To Center an Object Exactly In The Center
In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
This works wonderfully when you know the size of the thing you are centering. If you don't know, or are thinking it might change and want to be future proof, try this:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
This works with your example.
Edit:
If you want it to take the whole screen width then use
.centered {
position: fixed;
top: 50%;
left: 0%;
/* bring your own prefixes */
transform: translate(-0%, -50%);
}
Try this
img {
max-width:20%;
height:auto;
margin-top: 50%;
}
The best way to center child element is using flexbox.
#parent{
display:flex;
justify-content: center;
align-items: center;
width:200px;
height:200px;
background-color:red;
}
#child{
width:100px;
height:100px;
background-color:blue;
}
<div id="parent">
<div id="child">
child
</div></div>
There are several ways to achieve that, but most of the methods will need some update in your markup. I created this Fiddle which center the images adding some extra wrappers around. I hope it helps.
HTML:
<body>
<div class="wrapper">
<div class="inner">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
}
.inner img {
width: 20%;
float: left;
}
This question already has answers here:
Positioning <div> element at center of screen
(14 answers)
Closed 7 years ago.
I found a jquery code that rotate images inside a div and I want to position this div to the center of the page. I have this CSS for the images
#rotating-item-wrapper {
position: relative;
}
and this for the div
.rotating-item {
display: none;
position: absolute;
top: 150px;
left: 200;
}
How I manage to center the whole process to the center?
using margin and position tend to work in these sorts of situations:
HTML:
<div id="center-div"></div>
CSS:
#center-div {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background: red;
}
here's a jsfiddle: http://jsfiddle.net/mwyLz9rt/
Add this code to the div you wish to center:
.centered {
position: absolute;
margin-left: 50vw;
margin-top: 50vh;
transform: translate(-50%, -50%);
}
Also, next time try to provide us with a jsfiddle example so we could understand the problem more vividly :)
Here's a demo of the above code JSFIDDLE
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.