How do I vertically center align the parent container to the canvas which has position:relative? The parent container has a child element with position:absolute. The child element has been positioned in the center of the parent container.
Here's a snippet:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: red;
margin: auto;
}
.item {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="item"></div>
</div>
One solution is to wrap your .container with two wrappers; give the first one display: table; and height: 100%; width: 100%; and the second display: table-cell; and vertical-align: middle;. Also make sure your body and html have full height.
Here's a little working demo: little link.
Another method is to apply top: 50%; to your .container and margin-top: -150px; (300px / 2 = 150px). (Note that this method requires you to know the exact height of your container, so it might not be exactly what you want, but it might as well be!). A little working demo of this latter method: another little link.
I hope that helped!
Related
Firstly, I know this may seem like a duplicate of Positioning child content outside of parent container, but this is slightly different.
I've only had success floating an image outside of its parent container if I use an absolutely positioned div with the background-image set. Example of code used to achieve this:
.image {
position: absolute;
top: 0;
left: 0;
margin-top: -30px;
margin-left: -10px;
display: block;
height: 200px;
width: 140px;
}
Now I need to achieve the same with an <img /> element. What I'm hoping to achieve is something like this:
So the image should actually spill over on the left and right of the parent container. I've tried similar methids as given above, but without success. Any advice?
something like this?
.parent {
display:inline-block;
width: 100px;
height: 300px;
background-color:lightgray;
margin-left: 100px;
}
.child {
width: 200px;
height:100px;
border-radius: 100px;;
background-color:gray;
position:abolute;
margin-left: -50px;
margin-top:100px;
}
<div class='parent'>
<img class='child'/>
</div>
edit: as per the comments below this is what i see
See the method bellow
Wrap the image in a DIV
Add border-radius to achieve the egg like shape
Add overflow with a value of hidden to the image container
use an image that's bigger than it's container so that it will take on the egg like shape.
#square {
width: 300px;
height: 300px;
background-color: #6D9BBE;
position: relative; /* Relative to curtail overlap */
margin: 0 auto;
}
#square #eggy {
width: 380px;
height: 200px;
background-color: #8500B2;
border-radius: 50%;
position: absolute;
top: 50px;
left: -40px;
overflow: hidden;
}
#eggy img {
width: 390px
height: 240px;
}
<div id="square">
<div id="eggy"><img src="http://s9.postimg.org/xnmcpb0jz/use_this.png"/></div><!-- End Eggy -->
</div><!-- End Square -->
I have 2 columns 50% width each. Inside each column I have overflown content positioned absolutely relative to body.
<div class='column left'>
<div class='inner'><h1>Pink</h1></div>
</div>
<div class='column right '>
<div class='inner'><h1>Blue</h1></div>
</div>
I need the inner divs to be hidden. How do I do that? Setting overflow:hidden on .column has no effect on inner divs. Fiddle HERE
PS. The idea is to animate the width of the columns and show the inner content. This fiddle illustrates what i am trying to achieve (but it is using vh, vw that I cannot use due to browser requirement)
html, body {
width :100%;
height: 100%;
position: relative;
}
.column {
float: left;
width: 50%;
height: 100%;
overflow: hidden; /*has no effect*/
}
.inner {
position: absolute;
top: 50%;
width: 100px;
}
.left .inner {
right: 20px;
text-align: right;
}
.right .inner {
left: 20px;
text-align: left;
}
Are you simply looking for
visibility: hidden;
or
display: none;
This last one removes the element from the DOM.
I have a div inside a div, the child both being centered in its parent and bigger than the parent making it overflow equally on both sides of it. The child has another div inside it with some text.
<div class="outer">
<div class="inner">
<div class="text">
testing testing
</div>
</div>
</div>
css:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
}
.text
{
margin-left: auto;
margin-right: auto;
width: 400px;
}
http://jsfiddle.net/msVVD/4/
Now, if the document width is narrowed by resizing the browser window, or in the jsfiddle case, resized by dragging the handle between "JavaScript" and "Result", the text will not stay on the same horizontal position, but "travel" to the right.
Why?
You need to set a min-width to the body (or parent container in which the absolutely positioned element is aligned according to) like so
body
{
min-width: 600px;
}
This will prevent the absolutely positioned from traveling
FIDDLE
You are not positioning the .inner element relatively to the .outer one. Add position: relative to .outer.
Changes in your CSS:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
position: relative;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
margin-left: -100px;
padding-left: 100px;
}
Fiddle: http://jsfiddle.net/msVVD/7/
I have what is a fairly common page layout where the content div is centralised on the page using margin:auto 0. The width of the div itself varies depending on available page width.
I want another div featuring a logo to 'stick' to the outside left hand side of this div (ie no gap or overlap between the two) at a fixed height. What CSS should I use for this?
something like
html:
<html>
<div id='content'>
<div id='stickything'>a</div>
</div>
</html>
css:
html {
width: 100%;
}
#content {
position: relative;
width: 100px;
height: 600px;
margin: auto;
background-color: green;
}
#stickything {
position: fixed;
width: 25px;
height: 30px;
top: 0px;
margin-left: -25px;
background-color: red;
}
http://jsfiddle.net/Kkcnn/
Use position:absolute. It must help:
.container-div{
position: relative
}
.outer-div{
position:absolute;
top: 0 (your choice)
left: -/outer div's width/
}
I wonder whether it's totally impossible to bleed a nested div when the container is positioned relative and has overflow set to hidden?
Giving the nested div a fixed position is not an alternative in this case.
Please take a look at this example: http://jsfiddle.net/s7nhw/11/.
Anyone who knows how to do this?
I'll appreciate any feedback!
<div class="container">
<div class="nested-div"></div>
</div>
<style>
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position: relative;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
position: absolute;
}
</style>
I've never encountered a situation where one could override {overflow: hidden}. You'll probably need to restructure your HTML to place the nested div outside its parent in the code, then use absolute positioning and z-index to position it behind the current wrapper.
http://jsfiddle.net/s7nhw/13
.container {
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position:absolute;
left: 50%;
margin-left: -50px;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -100px;
}
<div class="nested-div"></div>
<div class="container"></div>
Here's some further discussion: override overflow:hidden with z-index
Absolute position child elements always remain under relative position parent element