I have a div element whose height I set with em, and whose width I set as a percentage. There is an image contained within. It has a width as a percentage (83%). However, if I am at a resolution where that div element is starting to get a little narrow, the image narrows up as well, but rather than taking up the entire div (as it should), the image just becomes small and appears just at the top of the div. To compensate for this, I want to vertically align my image within the div element. How can I do this?
vertical-align does not work in DIV elements. the only way to do this is to set this property to your div in css :
.divClass
{
display:table-cell;
vertical-align:middle;
}
after it, your DIV element will act like TD elemnt of Table.
to align your image in div with specifying percentage for image vertical position look at link bellow (percentage value) :
http://reference.sitepoint.com/css/vertical-align
Give the div position:absolute and the image inside it position:relative with top:50% and margin top equals to negative half the image height. This will center your image vertically.
div{
border:1px solid red;
width:400px;
height:400px;
position:relative;
}
img{
position:absolute;
top:50%;
margin-top:-64px; /*negative half image height */
}
Check working example at http://jsfiddle.net/qtL4n/
Related
I have a container div which contains an element with fixed proportions (an image for simplicity, but can be a video too). From now, I'll identify the container div with container and the element inside it with element.
Requirements
Here's what I'm trying to get (possibly using CSS only, without JS)
container must be 100% of window width and 50% of window height (see height exception in requirement n.5)
element must fill 100% of container width and keep its proportions (don't have to be deformed from window resizes)
element must be centered both vertically and horizontally inside container
when element height is higher than container height, excess parts of element above and below container must be hidden
when element height is lower than container height, container height must fit element height
The goal is to essentially create something equivalent to what background-size:cover does with images, but applied to a generic element with fixed proportions.
My (partial) solution
Here's my actual code. I've managed to achieve requirements n.1,2,4 (see fiddle) but I'm still struggling to find a solution for 3 and 5. In the posted fiddle I've commented overflow:hidden property and set a border to container to better show my goal.
.container {
margin-top:100px;
border:2px solid red;
height:50vh;
display:block;
/*overflow:hidden;*/
position:relative;
}
.container>* {
position:absolute;
top:-25vh;
display:block;
width:100%;
z-index:-1;
}
Any ideas?
Here is a jsFiddle I set up.
The parent and child element's height will be uncertain(means it will change after) and the child element's position must be absolute.
How can I offset the child element vertically by five pixels from the center of the parent?
HTML:
<div class="parent">
<div class="child"></div>
</div>
CSS:
.parent{
position:relative;
margin: 10% auto;
background:lightgray;
height:50px;/*parent's height will change after*/
width:200px;
}
.parent .child{
position:absolute; /* needs to be absolutely position */
top:0;
bottom:0;
margin:auto;
width:100%;
height:20px;/*child's height will change after*/
background:darkgray;
}
offset 5px where??
Like this ----> Updated Fiddle
or
Like this ----> Updated Fiddle
If I understand you correctly, then you want to offset the child by five pixels vertically. I'm not sure whether this means the element should move up or down from the middle of the parent, but here is an example of it moving up and here is one for moving it down.
Here's the code I added to the child's CSS to move it up:
top:50%;
margin-top:-15px;
Also remove the current top and bottom declarations for the child.
We set it 50% from the top of the parent and then subtract half of its height from its top offset which centers it. We add (or subtract) 5 pixels to/from that offset to offset it further.
For variable height, use this CSS (this moves it up five pixels):
top:-5px;
bottom:0;
margin:auto;
Example.
Use border-top
See my Fiddle here
with top:0;bottom:0; and margin:auto; child element can align middle when parent and child element's height "uncertain";
border-top:10px; can make child element offset.
and maybe you'll solve your issue
Considering the element is centered, you can just add
transform(translateY: 5px)
to offset the div vertically, or
transform(translateX: 5px)
to offset it horizontally.
.. expecting the picture to get "cropped" at the top and bottom. I only want it to fit the width 100%, and wish to become bigger than the height, but not leave the certain container.
How is that done?
Your question is a bit vauge if you meant you wanted an img to stretch to the full width off a container but the height too get cut off then you want something like this.
.container{
width:300px;
height:300px;
overflow:hidden;
display:block;}
.container img{
width:100%;
vertical-align:middle;
}
Just set the container's css overflow property to hidden, give it a fixed size, put your image inside with a fixed width, and done :)
Well, almost done. To get it cropped at the top and bottom, you need to get the image vertically centered in the box. One hack to achieve this is to have tiny text nodes on either side of the image, having a line-height the same as the container div height. Giving the image vertical-align:middle should center it vertically within your div.
I have a div directly under the body. My HTML looks like this:
<body>
<div class="parent"></div>
</body>
And the css I use is this:
.parent {
border:1px solid black;
bottom:10px;
position:relative;
top:100px;
width:500px;
}
This div doesnt stretch to the entire viewport/available body height. However, if I change the position to absolute, It does stretch.
Is there a way to get a relative positioned element to stretch to its container element height. I tried height 100% as well and it works but it gives a vertical scrollbar to me as the element is positioned at 100px from TOP.
The terms top, bottom, left and right are generally used for absolute positioning. If you want a div container to be as big as it's parent's container, then you have to specify through the terms height and width, and use a percentage or integer with a measurement scale attached such as 'px'. If you are worried about a scrollbar, just use the rule overflow:hidden;
I have a couple of Divs which I style using a class and an ID, he div's themselves are emtpy since they are only placeholders for their background. Example Div:
<div id='ranImg1' class='ranImg'></div>
Then I style them using this css:
.ranImg {
position:fixed;
z-index:0;
width:250px;
height:250px;
display:block;
}
#ranImg1 {
left:10px;
top:200px;
background-attachment:fixed;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
As long as the Div is in the left top of the document the Image shows correctly but when the Div is placed somewhere else on the page the image stays (invisible) in the top left corner of the page showing only the part which overlaps with the div (in the example this would be the bottom part of the image).
EDIT
I'm trying to position these Divs without effecting my other layout, they are behind the other layout. This works except for the fact that the background image doesn't follow the divs position.
So basically my question is, why isn't the background for the ranImg1 div positioning with the div but stays in the left top corner, and how to fix this?
your background-attachment:fixed will attach the background image relative to the browser window. if you want it to "follow" the div position, just remove the line:
#ranImg1{
left:10px;
top:200px;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
you could also set the background-position attribute to set the background relative to the containing div:
background-position: 0px 0px;
i'm not sure if that would help any beyond just removing background-attachment though (not enough coffee yet!)