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.
Related
How to shift a child block?
How to shift the blue block so that it stretches the parent block?
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
top: 350px;
}
<div class="main">
<div class="preMain">
</div>
</div>
Your issue is that your child block has position: absolute; meaning it no longer affects the parent div. If you want to shift the child block down but still have it affect the parent block you need to change the position of the child. Try something like this:
.main {
width: 400px;
min-height: 300px;
background: red;
position: absolute;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: relative;
margin: 350px 0px 10px 10px;
}
Admittedly not a perfect solution but you should be able to achieve the result you're looking for.
Alternately, look to this post here
Hope this helps.
You are using position: absolute, which allows to use bottom and left to position the element correctly.
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
bottom: 10px;
left: 10px
}
<div class="main">
<div class="preMain">
</div>
</div>
How can I stick a Square in the middle of a border of another div? I've tried the following approach:
.cont {
position: relative;
background-color: blue;
}
.square {
position: absolute;
height: 50px;
width: 50px;
border-radius: 0%;
background-color: yellow;
left: -5%;
top: 25%;
}
.logoOnTheRight {
max-height: 100px;
max-width: 100px;
}
.logoOnTheRight img {
width: 100%;
}
body {
padding: 50px;
}
<div class="cont d-flex flex-row-reverse">
<div class="square"></div>
<div class="logoOnTheRight p-2">
<img src="https://i.imgur.com/sPuqd31g.jpg" />
</div>
</div>
In fullscreen Square 'sits' on the border as it's supposed to. But when I resize the page square changes position in such way that it doesn't stay on the border. I've noticed that if I specify width in the container cont by px then it works. But I want cont to be 100% width. How can I force the Square to stay on the border of cont during page resize?
If you are using position: absolute you position an element absolute without any relation to other elements.
If you want to position an element relative to another element then don't use position: absolute You can align your two elements to the left/right with flexbox like shown in the answer below. If you want different alignment of items you need to adapt the CSS to get the desired result. Just don't use position: absolute at all if you want to keep it responsive.
There are scenarios when you need position: absolute but this is not one.
In my example I used display: flex in combination with align-items: center; to align items in the center of the box. Check this link for more information about flexbox.
To move the box to the left you can use transform: translateX(-50%);
.cont {
position: relative;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-between;
}
.square {
height: 50px;
width: 50px;
border-radius: 0%;
transform: translateX(-50%);
background-color: yellow;
}
.logoOnTheRight {
max-height: 100px;
max-width: 100px;
}
.logoOnTheRight img {
width: 100%;
}
body {
padding: 50px;
}
<div class="cont d-flex flex-row-reverse">
<div class="square"></div>
<div class="logoOnTheRight p-2">
<img src="https://i.imgur.com/sPuqd31g.jpg" />
</div>
</div>
You can try this
.square {
position: absolute;
height: 50px;
width: 50px;
border-radius: 0%;
background-color: yellow;
left: -25px;
top: 25%;
}
Instead of using % for left you can use px
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%);
}
This question already has answers here:
'transform3d' not working with position: fixed children
(10 answers)
Closed 3 years ago.
I want to position my element relative to my window for which i use fixed position but in one case it does behave strange.
My code looks like this:
<div style="
padding-left: 5px;
padding-right: 5px;
margin-left: 50%;
transform: translateX(-50%);
display: inline-block;
max-width: 300px;
width: 300px;
background-color: red">
something
<div style="width: 100px; height: 100px; background-color: blue; position: fixed; left: 0">
Gallery
</div>
</div>
As you can see second element is fixed and IT HAS TO BE inside first element but for some reason translate property also moves fixed child elements. What can i do to achieve this?
Here is the fiddle:
Fiddle
Because transform is purely visual. It's not actually moving the element in the layout.
It seems unlikely that a fixed position element has to be inside an non-fixed one though.
I'm unsure why you are centering the parent like that though, it's unnessarily complicated.
As an alternative:
body {
margin: 0;
padding: 0;
text-align: center;
}
.parent {
padding-left: 5px;
padding-right: 5px;
display: inline-block;
max-width: 300px;
width: 300px;
background-color: red;
}
.gallery {
width: 100px;
height: 100px;
background-color: blue;
position: fixed;
left: 0;
}
<div class="parent">
Contents
<div class="gallery">Gallery</div>
</div>
You can try this:
<div class="wrapper">
something
<div class="gallery">
Gallery
</div>
</div>
and
body {
margin: 0;
padding: 0;
}
.wrapper {
padding-left: 5px;
padding-right: 5px;
position: fixed;
left: 50%;
transform: translateX(-50%);
max-width: 300px;
width: 300px;
background-color: red
}
.gallery {
width: 100px; height: 100px; background-color: blue;
}
here your fiddle modified
I am using absolute and relative positioning to horizontally and vertically center a div in a container div. Adjacent to this container is another div which should fit neatly beside the container inside the top-level container div. But instead, it moves down, almost completely out of the boundary of the top-level div. Source code:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
display: inline-block;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
Example fiddle here
Any ideas on why the adjacent div doesn't align properly?
You could use flex on the parent instead of inline-block on the children, would solve the issue of the second box being pushed down if there isn't enough space:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
display: inline-block;
vertical-align:top;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
display: inline-block;
vertical-align:top;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>
If you want to know the actual reason for your alignment issues, it's because you have two inline block elements that are different heights next to each other.
The default vertical alignment for inline block elements is baseline which means that you get the effect that you see.
If you change the vertical align to top for both the container and the adjacent, your code will work as you want:
#top-level {
background: #90c0ff;
height: 400px;
width: 600px;
/* add te following */
display: flex;
justify-content: space-between;
}
#container {
background: #bbffbb;
height: 400px;
width: 400px;
position: relative;
text-align: center;
}
#inner {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}
#adjacent {
background: #ff5050;
height: 395px;
width: 195px;
}
<div id="top-level">
<div id="container">
<div id="inner">
Internal Text
</div>
</div>
<div id="adjacent">
Sample text
</div>
</div>