Okay i'm trying to center some content, but, I want to keep the absolute attribute to keep the content within a certain height on the page, but at the same time, i want the content perfectly centered. How do I center it if absolute takes specific coordinates? Everyone has different sized monitors so giving the coordinates to center it will fail.
#logo {
position: absolute;
top: 25px;
left: 0px;
}
#logo {
position: absolute;
top: 25px;
width: 100px;
left: 50%;
margin-left:-50px;
}
Make the left position 50% and then give it a negative margin to pull it back by half the width.
Demo
Related
I have a Image that i made which acts as a place holder for some of the elements in my website and i want the elements to be placed exactly there. Like here
Like in this image how do i place a div of textbox and a button on the board side of the clock exactly there using css and html.
Your can use the position: absolute in your css and with the help of the top, right, left and bottom you can set the perfect position for it
for eg
{
position: absolute;
top: 50px;
left: 0;
}
use this to get the div in center
{
position: absolute;
top: 50%;
left: 50%;
transfrom : translate(-50%,-50%);
}
Use this for more referance
I have an image with some circles on hands fingers in the image. I am placing glowing div on the image.
{
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
margin: 0 !important;
padding: 0 !important;
}
This is how I place glowing circle.
.small_rings_group {
position: absolute;
left: 25.3vw;
top: 10vh;
}
Its works perfect on window width change but when I change the height of the window, the placement changed.
1.) Use position: relative for the image to have it act as "position anchor" for the absolutely positioned elements.
2.) In the CSS of the absolutely positioned elements, don't use absolute values, but percentage values for left and top (will be in relation to the parent). This will keep the position responsive.
Is it possible to position center not top left corner of an image in CSS?
I have an image that has other images on top of it (a map with points). The background image has a fixed size and I have set the location of the images that are on the top with css:
#map {
width: 700px;
height: 700px;
margin: auto;
position: relative;
}
.point {
position: absolute;
left: 39.9%;
top: 81.9%;
z-index: 1;
}
the size of the point is 20x20px so I subtracted 10px from the necessary location and then converted to %. Everything looks as it should.
I am trying to make the code work for smaller screens. I changed the width and height to max-width and max-height. Now the background adapts to the smaller screen, but because of those 20px I calculated in the position of the point, the smaller the screen gets, the further from the needed location the point goes.
The only solution I could think of was if I could set the position of points center with %, not the top left corner. Would it be possible? Is there a better way?
left: calc(50% - 10px);
top: calc(50% - 10px);
Or
left: 50%; margin-left: -10px;
top: 50%; margin-top: -10px;
I'm centering a DIV using translate
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
It does puts it in the middle, however with too much margin to each side. Meaning, that although it is in the middle, never does it go to the edges of the browser window, when the window is resized.
div {
text-align: center;
font-size: 80pt;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
border: 1px solid grey;
}
<div>Look at me, I'm centered, with too much margin.</div>
http://codepen.io/anon/pen/LbQxLV
This is how text wrapping works. When you put the div to left 50% of the page, max width it can obtain is from that starting point at 50% left of screen to right edge of the page, i.e. 50% only. Which is you view is getting.
Thus when using translate for centering a div, you must specify the width if you want to fill it the parent.
So ,just specify the width for your element!
add this code:
div{
width: 100%;
max-width: 90%;
}
change as per your need!
I have two images on the background of the website I am working on, now for me on a 15" screen the position of these look fine, just behind and right/left of the content container. But on a big widescreen (or just other much larger screen sizes than mine) they end up being further away from the content container and look like they are on their own.
They are percentage based but, 25% from the left/right on my screen is different to someone with a widescreen. I need them in the same position regardless. X% from the center is probably more like it. Anyone know a suitable option? I've attached some code of what the images are using right now.
http://bit.ly/1aNgkfa
CSS for the background image of the herbs on the homepage (top-left)
.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}
CSS for the background image of the peppers on the homepage (bottom-right)
.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}
Use the left property along with a minus margin-left to align as needed:
.herb-bg-img {
position: absolute;
left: 50%;
margin-left: -600px; // Change as needed
margin-top: 5%;
z-index: -2;
}
Same with the right-hand image, only use a positive margin-left instead.
This should stay the same regardless of screen width.
You're positioning these two images absolutely. They should be absolutely positioned in relation to a parent element with position: relative, however. Right now they are in relation to the page, which will continue to cause you problems.
I'd recommend adding position: relative to your .container elements.