This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
vertical alignment of image inside a div
OK, this what I'm trying to do :
I'm having an empty div (a box), with almost no height.
I'm making an AJAX request to load some content into it.
Before loading the content, I want to display in a typical "ajax loading" rotating gif.
I've managed to :
Center the img horizontally (by putting it inside another div with text-align:center;)
What is left :
Be able to give some height to that empty div. (easy)
Vertically align the image, so that it appears on the very center of the box. (I've got absolutely no idea how to do this. I'm currently setting an upper margin, which works for one particular box, but which wouldn't work if the box already has some different height...)
How would you go about it?? (Any possible idea is acceptable. CSS/Javascript whatever...)
http://jsfiddle.net/teresko/5mG2y/
The basic idea is the use display: table-cell; and then vertical-align: middle;
the HTML
<div class="container">
<div class="holder">
<img class="stuff" src="path/to/image.png">
</div>
</div>
the CSS:
.container{
/* the container in which image is placed */
height: 300px;
margin: 0 auto;
width: 200px;
}
.holder{
display: table-cell;
width: 100%;
vertical-align: middle;
height: inherit;
}
.stuff{
display: block;
}
This way the placement of image will not depend on dimensions of container. It also can be adjusted to be in horizontal center too. All you have to do is to add .stuff{ margin: 0 auto;}.
Don't forget that table-cell is not the correct usage. You don't want images to be trated as table cells, since table cells should only contain table data.
Just raising a caution flag. Stick to the semantics.
it's better to use the answer from that other thread.
This:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
Good luck!
With jQuery
//HTML
<div><img src="loader.gif" class="loader" alt="Loader" /></div>
//JS
$.fn.centeringIn = function(){
var pere = this.parent();
(pere.css("position") == 'static') ? pere.css("position","relative"):pere.css("position");
this.css({
'position' : 'absolute',
'top' : ( pere.height() - this.height() )/2+'px',
'left' : ( pere.width() - this.width() )/2+'px'
});
}
$(document).ready( function() {
$('.loader').centeringIn();
});
Add some margin-top to the image style so that it is aligned in the middle of the div. Say your div is 50px height and your image has a height of 5px. Then make your margin-top 20px to put it in the middle.
Related
This question already has answers here:
Height equal to dynamic width (CSS fluid layout) [duplicate]
(9 answers)
css width same as height
(4 answers)
Closed 8 years ago.
What I try to make is square that change size with the size of the screen.
So I have the width set to 25%.
How do I make sure that the height keeps the same length in px as the width?
Thanks in advance.
You could use top/bottom padding property in percentage, to achieve the result.
Example Here.
.box {
width: 25%;
padding-bottom: 25%;
}
A percentage value on top/bottom padding or margins is relative to the width of the box's containing block.
8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
<percentage>
The percentage is calculated with respect to the width of
the generated box's containing block, even for 'padding-top' and
'padding-bottom'.
Adding the content
Since the the height of the box grows by adding content, we could wrap the content by an element .wrapper and position that absolutely relative to the box, and then use top, right, left and bottom properties to fill the entire space of the box.
Example Here
<div class="box">
<div class="wrapper">
<!-- content goes here... -->
</div>
</div>
.box {
width: 25%;
position: relative;
}
.box:after {
content: "";
display: block;
padding-top: 100%; /* 1:1 square */
}
.box > .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
For further information you could refer my answer here (Responsive Container section).
you may set the width value as a percentage, then grab it with jquery then let it to be the height value. see this
var box = $(".box");
var width = box.css("width");
box.css("height", width);
http://jsfiddle.net/DPYcg/1/
To be able to add contents, you may use pseudo element and floats behavior : http://codepen.io/anon/pen/fklAr/
div {
width:25%;
background:red;
margin:auto;
}
div:before, div:after {
content:'';
}
div:before {
float:left;
padding-top:100%;
}
div:after {
display:block;
clear:both;
}
maybe a duplicate if you want to center content : Center content in the middle of div container
I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working
I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.
Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..
You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2
Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width
Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.
The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)
I have a parent/child divs coded as;
<div class="classes scrollable">
<div class="items">
....Some content
</div>
</div>
My CSS is;
.scrollable {
overflow: hidden;
position: relative;
width: 100%;
}
.scrollable .items {
clear: both;
position: absolute;
width: 20000em;
}
Actually my "items" div has it's "left" position changed dynamically via JS (for kind of carousel effect...scrolls to left/right)
Also bcoz it is an absolute div, I cannot get the parent div "scrollable" to expand as per "items" content.
How do I fix this issue ?
You can set height on the .scrollable. The inner scrolling div is just one row, right?
What keeps you from not making .items absolutely positioned?
Can't you just use something like margin-left: -100px, instead of left: -100px;?
Working example of what I mean: http://jsfiddle.net/fk5Q2/
I have a image slider with description coming from left to right. Now I need to make the text alignment as justified and I want to place the text in the center. If I add any property to the CSS, it does not work.
setting.$descpanel=$('<div class="fadeslidedescdiv" valign="center"></div>')
.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:0,right:setting.dimensions[1],bottom:0, font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
.appendTo(setting.$wrapperdiv)
$('<div class="descpanelbg" valign="center"></div><div class="descpanelfg" valign="center"></div>') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:150, width:setting.$descpanel.width(), padding:'20px'})
.eq(0).css({background:'#000000', opacity:0.7,}).end() //"descpanelbg" div
.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
.appendTo(setting.$descpanel)
You already have a class for that div so just do it in CSS:
.descpanelfg { text-align: center; }
If you mean middle (which is not center) you have to give it fixed height first, for example:
.descpanelfg { height: 20px; line-height: 20px; vertical-alignment: middle; }