I am trying to vertically center an image. I know how to do it with absolute position, but the problem with this is that other elements around it collapse into it.
This is how I vertically center using absolute position:
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I'd like to use relative position, but when I change absolute to relative, it does not work. Anyone have any suggestions to vertically center using relative position? I could do padding/margin top until its centered but I would like the css to generate it centered in case the image changes height when responsive.
This is the HTML and CSS, its pretty simple:
<div class="header-main-left">
<img src="/images/header_logo.png" >
</div>
.header-main-left {
float: left;
height: 95px;
position: relative;
}
.header-main-left img {
position: absolute; //I want this to be position relative
top: 50%;
transform: translateY(-50%);
}
position:relative does not take an element out of the flow, it just allows you to change its render location relative to where it would've been rendered had it not been positioned.
position:absolute takes an element out of the document flow. This causes the elements origin to be the upper left of the nearest ancestor element that is not position:static.
If you need to set your particular element to position:relative, but need its initial position to be centered in its parent, add a wrapper element and move the centering to that wrapper.
.header-main-left {
float: left;
height: 95px;
position: relative;
}
.header-main-left .logo-wrapper {
position:absolute;
top:50%;
height:100%; /* let the relative top and transform on the img work */
}
.header-main-left img {
position: relative; /* I want this to be position relative */
top:50%;
transform: translateY(-50%);
}
<div class="header-main-left">
<div class="logo-wrapper">
<img src="/images/header_logo.png" >
</div>
</div>
Try to use the
display: table-cell;
Than the vertical align set to center
Or use tables.
Or use Jquery that add margin-top on the element equally to the half of its height
Related
I have a div that gets taller when a user selects a certain checkbox.
The default behavior of this div was that when the checkbox is selected the div grows equally at the top and bottom. The top becomes higher and the bottom becomes lower. I would like the top of the div to be fixed and only allow the bottom to become lower so that the content of the div that is present regardless of the checkbox state does not move when the user selects or deselects the checkbox.
I found that adding this styling to the div does the trick.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
}
However, this also moves the div to the left side of the page. I need it to be centered. The div should be a fixed width unless thear window is narrower than that width in which case the div should become narrower.
If I change the position attribute to relative, then the div is centered properly as described above, but the top is no longer fixed.
How can I make the top of the div fixed, while at the same time satisfying the width requirement set forth above?
.fixed-top {
position: fixed;
left: 50%;
text-align: center;
margin-left: -120px;
top: 0;
width:240px;
}
Try this code....
So, this is how I would solve this
First, please make sure the parent element of the div have its own width (in your case, width:100%;) and have any kind of position (e.g. position: relative;) otherwise this trick wont work.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
// add this
left: 50%;
transform: translateX(-50%);
}
The trick is to set the div's left attribute by 50% of its parent element width, then move (translateX) it back (-50%) by half of the div width.
You can also use this trick on top attribute too.
top: 50%;
transform: translateY(-50%);
or use this to center both top and left
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
EDIT:
If you want the div position attribute to be relative, you can use
.fixed-top {
position: relative;
// instead top, we use margin-top
margin-top: 50px;
width: 400px;
// add this
margin-left: auto;
margin-right: auto;
}
I hope this helps ;)
So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using overflow: hidden;.
Now my next problem; How would I have the image show a part I want, meaning, when using the overflow:hidden it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks.
Edit: My layout is: parent div with the image div as the child. Parent div's height defined at 600px and width at 100%. And height and width of image div defined as 100%.
Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:
.container img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.
You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.
In which way are you using this image?
If you're using this as a background image the solution is much simpler and would simply involve using background positioning. If you're using this as an image pulled in using an img tag you can try the below to manipulate the image.
Be aware that this won't work on every browser.
.new-image-container {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
}
.new-image-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-90%);
-ms-transform: translate(-50%,-90%);
transform: translate(-50%,-90%);
}
<div class="new-image-container">
<img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>
Here is my answer/solution for anyone that comes across this post.
#Banner {
width: 100%;
height: 350px
}
#backgroundBanner {
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBanner img {
width: 100%;
position: relative;
top: 70%; /*make changes to this and below to adjust the positioning of the image*/
transform: translateY(-70%);
<div id="Banner">
<div id="backgroundBanner">
<img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
</div>
</div>
I saw that there were some posts on the subject but none of them answers my question specifically
http://jsfiddle.net/27van/ shows how to center text horizontally.
I want to center it vertically in the parent div, without using the top which sets a fixed number of pixels (while I need it to be dynamic)
Any clues?
.parent_div {
position: relative;
text-align: center;
}
.child_div {
position: absolute;
width: 100%;
top: 70px;
}
<div class="parent_div">
<img src=...></img>
<div class="child_div">
<h1>Some Title</h1>
</div>
</div>
Because you have given the child element a width of 100% so i am guessing you are looking to center align it vertically ... in that case you need to know the height of your .child-div if it has a fixed height then you can use something like this:
.parent_div {
position: relative;
}
.child-div {
position: absolute;
height: 100px; /* for example */
top: 50%;
margin-top: -50px /* height divided by 2 */
}
and if the height is unknown then you can use the same method but calculate height & margin via jQuery. And just in case you wanted to align it horizontally you can use the same method but with these changes ... in this case you need fixed width.
.child-div {
position: absolute;
width: 100px; /* for example */
left: 50%;
margin-left: -50px /* width divided by 2 */
}
Your updated fiddle
I have a container element with long content which is scaled:
.container {
transform: scale(0.9);
}
inside this container I have a child div which is used to be a popup. It's positioned absolute with top 50%
.popup {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
}
but unfortunately when container is scaled this 50% is not working. I need to use ~240% if it appears on the bottom of a page.
Do you now some specifics on applying positioning on children of scaled elements?
DEMO: http://labs.voronianski.com/test/scaled-positioning.html
Add to .wrap:
.wrap {
...
position: relative;
/*some prefix*/-transform-origin: 0 0;
}
You'll need to reposition the .popup (now the reference frame is the .wrap, instead of the html element), but in Chrome the scale toggle works fine after this change.
See: When using CSS Scale in Firefox, element keeps original position
Imagine:
<div class="outer">
<div class="inner">
</div>
</div>
Where:
.outer is part of a column structure, and its width is a percentile and therefore fluid.
.inner represents a fixed position element that should fill with a 100% width the .outer element. However its position vertically remains the same, therefore fixed.
I’ve tried to implement this layout with the following CSS:
.outer {
position: relative;
width: %;
}
.inner {
position: fixed;
width: 100%;
}
However, .inner does not calculate its width as a percentage of its relative parent. Instead it fills the full width of the window/document. Attempting any left or right properties result in the same parent-ignoring qualities.
Is there any way around this?
.outer {
position: relative;
width: %;
}
.inner {
position: fixed;
width: inherit;
}
That should do the trick.
position: fixed is always relative to the window/browser, thus it cannot be used to solve your problem. Fixed positioning removes the element from the natural order of the DOM, and thus does not remain within your outer div anymore, hence why it takes the full width of the browser and not of your container. What you need to use is position: absolute to place .inner relative to .outer. You'll be able to position your element as well as have its width be contained by the .outer div.
Use this :
.inner {
position: fixed;
left:0;
right:0;
}
Fixed elements take only absolute values as width. If your parent container is fluid (width is a percentage), you need to set the width of the fixed element dynamically. You need to get the width of the wrapping container and set it on the sticky element.
CSS
.outer {width: 25%;}
.inner {position: fixed;}
JS
var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);
Additionally, you can add an event listener in case window resizes.
JS
window.addEventListener('resize', resize);
function resize() {
var fixedWidth = $('.outer').css('width');
$('.inner').css('width', fixedWidth);
}
You can take a look at this jsfiddle that i made that illustrates the fix for your problem, you can use this code exactly as it does what you want.
position:fixed is always relative to viewport/browser window, not to ancestors.
What about using something like this fiddle ?
.outer {
width: 20%;
height: 1200px;
margin-left: 5%;
float: left;
}
.inner {
height: 200px;
position: fixed;
top: 0;
background: orange;
right: 75%;
left: 5%;
}