This question already has answers here:
How to center a "position: absolute" element
(31 answers)
Fit, scale and center image responsively to browser window (CSS)
(1 answer)
How can I center a responsive image
(6 answers)
How to keep an image centered and responsive?
(8 answers)
Closed 2 years ago.
I am desperately trying to put my image between 2 div blocks and that this one be responsive.
I suggest taking a square image because as you can see I want my image to fit in a circle and since the height is set to auto in my absolute-block(because I want to keep the responsive behavior) the shape would be a rectangle.
html, body {
width: 100%;
height: 100%;
}
.child1 {
width: 100%;
height: 200px;
background-color: red;
}
.child2 {
width: 100%;
height: 200px;
background-color: green;
}
.main {
position: relative;
width: 100%;
}
.absolute-block {
position: absolute;
top: 25%;
left: 40%;
width: 16%;
border: 2px solid yellow;
}
img {
height: 100%;
width: 100%;
border-radius: 50%;
border: 5px solid white;
}
<body>
<div class="main">
<div class="absolute-block">
<img src="test.jpg">
</div>
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
So if everything goes well it should look something like that:
And now when I try to horizontally shrink the size of my window, I would like the size of my image to shrink vertically and horizontally (ok that works) and I would like the center of my image to stay between the 2 divs (it doesn't work). What can I change to my code to get this result?
First just center the absolute block in the middle of the container, we can do that with
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
top and left will position the element according to it's top left corner, Then we use transform to shift the element half way in both direction according it's own width and height.
Now once the block is perfectly centered we can add whatever we want inside it.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.child1 {
width: 100%;
height: 200px;
background-color: red;
}
.child2 {
width: 100%;
height: 200px;
background-color: green;
}
.main {
position: relative;
width: 100%;
}
.absolute-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16%;
border: 2px solid yellow;
}
img {
max-height: 100%;
max-width: 100%;
border-radius: 50%;
border: 5px solid white;
}
<div class="main">
<div class="absolute-block">
<img src="https://i.picsum.photos/id/353/300/300.jpg">
</div>
<div class="child1"></div>
<div class="child2"></div>
</div>
Would you like to give a try with following,
img {
width: 100%;
height: auto;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Related
I have a background image, but I need to place a div that its bottom edge should go below the image. What's the easiest way to do this?
Please see the attached image. The white part is the background image and the blue part is my div over the background.
You can create a relative positioned wrapper and then set absolute positioning with bottom: -10%; or bottom: -20px; for a div over a div with image:
.image-with-block-wrapper {
position: relative;
}
.image {
height: 200px;
border: 1px solid #111;
background: url('https://www.gravatar.com/avatar/f42a832da648291bf80206eda08e3332?s=328&d=identicon&r=PG&f=1');
}
.div-over-bg {
border: 1px solid #111;
position: absolute;
height: 50px;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
background: green;
width: 100px;
margin: 0 auto;
}
<html>
<head></head>
<body>
<div class='image-with-block-wrapper'>
<div class='image'></div>
<div class='div-over-bg'></div>
</div>
</body>
</html>
Edit:
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
So I've created a container with a background image and placed a div inside.
I've given the .block margin: auto; to center it and added position: relative; so I can move it, because it has position: relative; I can add top: 100px; to move it down from the top by 100px
.container {
background-image: url('https://via.placeholder.com/150');
width: 100%;
background-position: cover;
height: 300px;
position: relative;
}
.container .block {
height: 300px;
background-color: blue;
width: 500px;
position: relative;
margin: auto;
top: 100px;
}
<div class="container">
<div class="block">
</div>
</div>
Extra info by #I_Can_Help
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 2 years ago.
I am wondering how i can center absolute element inside container, but without changing position of childs elements inside centered element. *Child elements are absolute too.
I simply want to center the '#ground' both, vertically and horizontally inside container, without moving any child inside '#ground', is it do-able?
#container {
display: grid;
width: 150px;
height: 150px;
background: black;
}
#ground {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
.tile {
position: absolute;
width: 30px;
height: 30px;
background: aqua;
top: 20px;
left: 50px;
}
<div id="container">
<div id="ground">
<div class="tile"></div>
</div>
</div>
Simply.
No as far as my knowledge goes
But, you can center #ground and then move it's content to the original position again with absolute positioning
#container {
display: grid;
width: 150px;
height: 150px;
background: black;
position: relative;
}
#ground {
position: absolute;
width: 100px;
height: 100px;
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tile {
position: absolute;
width: 30px;
height: 30px;
background: aqua;
top: 5px;
left: 25px;
}
<div id="container">
<div id="ground">
<div class="tile"></div>
</div>
</div>
Using absolute positions is not the best way to align the elements. You can use flexbox which is a better way and is responsive too!
#container {
display: flex;
width: 150px;
height: 150px;
background: black;
align-items: center;
justify-content: center;
}
#ground {
width: 100px;
height: 100px;
background: red;
}
.tile {
position: relative;
width: 30px;
height: 30px;
background: aqua;
top: 20px;
left: 50px;
}
<div id="container">
<div id="ground">
<div class="tile"></div>
</div>
</div>
You should use
#ground {
left:(no. of pixels);
top:(no. of pixels);
}
Or you can also use margin and set it as auto.
how to make absolute center horizontal and vertical a div with fluid width and height using css?
Thanks in advance for helping.
#div_parent{
background:#ccc;
position:relative;
}
.div_child{
background-color:#338BC7;
position: absolute;
left: 50%;
width: auto;
height: auto;
padding: 20px;
top:25%;
background: blue;
color: white;
text-align: center;
border:1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
A couple of problems with your code:
You do not have a width and height specified on your html and body, without which any of descendent elements wouldn't have a reference to set their positions and/or dimensions in percent units.
You do not have dimensions (width/height) specified on your #div_parent, without which you cannot position its absolutely positioned child (which is relative to it) to the vertical center. Moreover, as you want to position your .div_child to the center of the page, why do you have a parent wrapped around it anyway.
Apart from fixing the above, a trick which is usually used to align elements both horizontally and vertically is to use transform: translate to shift it back by 50%.
Like this:
.div_child {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
...
}
Fiddle: http://jsfiddle.net/abhitalks/Lnqvqnkn/
Snippet:
* { box-sizing: border-box; paddin:0; margin: 0; }
html, body { height: 100%; width: 100%; }
#div_parent{ height: 100%; width: 100%; background: #ccc; position: relative;}
.div_child {
background-color: #338BC7;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: auto; height: auto;
padding: 20px; color: white; text-align: center; border: 1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
When I need fluid width, I prefer using this method:
CSS
.background { display: table; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.background > div { display: table-cell; vertical-align: middle; text-align: center; }
HTML
<div>
<div>
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
Demo on jsfiddle.
Hope it works for you.
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
i have div area which is devided in to 4 equal parts, like the one atached.
now i need another div to be placed at the bottom area as an overlay to the above div. Imagine it like a text scroll area on the bottom side of the TV and the TV screen is constructed by 4 divs.
I am able to create the 5 divs. now the issue is that the 5th div(scroll area) is not going above the bottom edge of the 2 lower divs (3 and 4). I also had put z-index also but failed
can anybody share a sample for styling this.
You can solve it this way:
HTML:
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="overlay"></div>
CSS:
.area{
float: left;
width: 49%;
height: 300px;
border: 1px solid black;
}
.overlay{
width: 200px;
height: 100px;
background-color: blue;
clear: both;
position: absolute;
bottom: 30px;
margin: -100px;
left: 50%;
}
Please note that I have used hard coded example values. The actual values depends on which context the markup is in.
Without your code it's hard to figure what's not working.
If I understand what you want this is what I would have done:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="overlay"></div>
</div>
css:
.container {
position: relative;
width: 600px; /* use the size you want */
height: 400px;
}
.container div {
position: absolute;
width: 50%;
height: 50%;
}
.container .block1 { top: 0; left: 0; background: pink; }
.container .block2 { top: 50%; left: 0; background: red; }
.container .block3 { top: 0; left: 50%; background: green; }
.container .block4 { top: 50%; left: 50%; background: blue; }
.container .overlay {
position: absolute;
width: 80%;
height: 100px;
left: 10%;
bottom: 30px; /* distance from the bottom */
z-index: 1;
background: yellow;
}