I'm trying to format an image so it aligns to the bottom of a div. I put what I think is the relevant code in a fiddle: http://jsfiddle.net/5KEyD/
<div id="main">
<div style="display: inline-block; margin-left: 15px">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="Bottom-Text.png" alt="Some Image" width="800" height="152" /></div> </div></div>
#main{width:800px; height: 200px; padding-right:40px; overflow:hidden; background- color: #c0c0c0;}
#imageWrapper { position: relative; height: 152px; } /* height is for display purposes only */
#bottomImage { position: absolute; bottom: 0px; }
What I need is for the image to align (centered) all the way at the bottom, with no extra grey space under it.
Thanks for any help!
<div style="width: 800px; margin: 0 auto;">
<div id="imageWrapper">
<img id="bottomImage" class="aligncenter" src="/wp-content/uploads/2014/05/Bottom-Text.png" alt="Some Image" width="800" height="152">
</div>
</div>
I think that happens because of using display: inline-block for div element. Inline-block rule always adds 5px margins to element. So if you remove it the issue will be fixed. If you need that rule you can add -5px bottom margin.
Related
Below is my div structure. I've got 2 arraow set on the top and at the bottom.
My question is how do I make the 2 arrows centered and slightly towards the column of images?
Here is a Fiddle
I tried this but no luck
.arrows{
border: 3px solid lime;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
display: inline-block;
height: auto;
}
html:
<div id="Wrapper">
<div class="row">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
<div id="itemWrapper">
<div id="items">
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
<div class="content">
<input type="image" src="http://img42.com/p1puE+" class = "thumb" />
</div>
</div>
</div>
<img src="http://img42.com/h1DoP+" class="arrows" height="128" width="128" />
</div>
</div>
Well, you were on a right track with display-inline and text-align:center
You just needed to set the align property on the parent element so that any inline or display-inline HTML element inside that parent element would be centered.
#Wrapper{
height: 100%;
border: 1px solid #f60;
text-align:center;
width:300px;
}
.arrows{
border: 3px solid lime;
display:inline-block;
background:red;
position:relative;
z-index:10;
}
You could also use negative margins on #itemWrapper to offset the arrows up and down.
#itemWrapper{
height: 100%;
overflow: hidden;
position: relative;
border: 1px solid brown;
margin-top:-15px;
margin-bottom:-15px;
}
JSFIDDLE
Centering the arrows
Enclose the arrows in div tags. Set the width of the divs to be the same width as the images. Then, use text-align: center in your css, for the div.
<div class="arrow-wrapper">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>
css:
.arrow-wrapper{
width: 200;
text-align: center;
}
Making them closer
In order to get them closer to the image, give each arrow its own class:
<img src="http://img42.com/p2OH4+" class="arrows top" height="128" width="128" />
<img src="http://img42.com/p2OH4+" class="arrows bottom" height="128" width="128" />
And then put css:
.top{
position: relative;
top: 20px;
}
.bottom{
position: relative;
bottom: 20px;
}
To add to #Slavenco's answer and to wrap this up entirely, I would suggest adding an "arrow-top" class, and "arrow-bottom" class, and adjust the margin to achieve the overlapping effect you are looking for. You may need to adjust the z-index to make the arrows appear on top.
I wrapped each image like so:
<div class="arrow arrow-top">
<img src="http://img42.com/p2OH4+" class="arrows" height="128" width="128" />
</div>
(Of course, the bottom arrow is arrow-bottom instead of arrow top)
and the CSS is as follows:
.arrow { width: 100%; text-align:center; }
.arrow-top{ margin-bottom: -10px; }
.arrow-bottom{ margin-top: -10px; }
You can obviously adjust the margins until you get the absolute desired overlap you're looking for.
https://jsfiddle.net/b899145q/12/
I'd use position: relative; for class="row" and position: absolute; for class="arrows" to get the overlap you want. Take them out of document flow. To just get them to just center without overlap, move the text-align: center; to the containing element.
I am building a responsive website that contains a complex collapsible grid - which requires parts of large images to be displayed within smaller fixed width divs - which will adjust in size based on media queries - overflows are hidden to give a masked effect.
I need to position the images to -
Left Top
Center Top
Left Top
Of course left top is standard browser behaviour - but I need best practice cross-device/browser solutions for center/top and left/top.
So for example - the following code structure -
<div style="width:100px; height:50px; overflow:hidden;">
<img src="http://i.guim.co.uk/static/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2014/9/24/1411574454561/03085543-87de-47ab-a4eb-58e7e39d022e-620x372.jpeg" style="width:620px; height:320px;">
</div>
How would I position the image tag Center-top or left-top
You can use absolute positioning with the properties top, bottom, left, right.
div {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
margin: 10px;
display: inline-block;
}
img[data-position] {
position: absolute;
border: 1px dotted red;
}
img[data-position*=top] { top: 0; }
img[data-position*=bottom] { bottom: 0; }
img[data-position*=left] { left: 0; }
img[data-position*=right] { right: 0; }
<div>
<img src="http://i.stack.imgur.com/SyxjC.jpg" alt=""
data-position="left top" width="620" height="320">
</div>
<div>
<img src="http://i.stack.imgur.com/SyxjC.jpg" alt=""
data-position="right top" width="620" height="320">
</div>
<div>
<img src="http://i.stack.imgur.com/SyxjC.jpg" alt=""
data-position="left bottom" width="620" height="320">
</div>
<div>
<img src="http://i.stack.imgur.com/SyxjC.jpg" alt=""
data-position="right bottom" width="620" height="320">
</div>
I want to put the play button (first img) centered to the second images. I can do it with position absolute and margin but how can that be dynamic? What if I'm in a loop and the height of the second images is not always the same?
<img src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/>
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/>
There are two solutions to do this
1) Put that image between paragraph tags and give style to that paragraph "text-align:center;", just like below
<p style="text-align:center"><img src="#url to your image"/></p>
2) Give style to that img tags margin:0px auto , just like below
<img src="#url to your image" style="margin:0px auto;"/>
you will need to add a parent for the images and position the play image absolute and set it top left 50% and set negative margin of half the width of the play image so that it align it vertically and horizontally
div {
margin: 30px;
position: relative;
border: 1px solid red;
}
img.main {
width: 100%;
height: auto;
vertical-align: middle;
}
img.play {
position: absolute;
top: 50%;
left: 50%;
margin: -63px 0 0 -63px;
}
.second .main {
height: 400px;
}
<p>with smaller height</p>
<div>
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
<p>with larger height</p>
<div class="second">
<img class="play" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png" />
<img class="main" src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg" />
</div>
I have a div as the main wrapper, then an image-wrapper div as the image wrapper, and an .
What I want is that under certain lower resolutions (1300px for example), the image-wrapper div to stay vertically aligned. Now, when you see it, it is not vertically aligned. The top padding keeps the image-wrapper div stuck to the top, while on the bottom there is a large gap.
Here is the site:
http://namdarshirazian.com
It happens in the homepage. The central image.
Here is the ID of the main div:
#homepage-image
Here is the CSS of the three
#homepage-image
{
padding: 20px 20%;
border: 2px #CCC solid;
background-color: white;
text-align: center;
overflow: hidden;
height: 540px;
}
#homepage-image div
{
height: 495px !important;
padding: 0px !important;
}
#homepage-image div img
{
width: 100%
}
And here is the markup of the element:
<div class="image" id="homepage-image">
<div style="height: 520px; overflow: hidden;">
<img src="photo/homepage/image.jpg" alt="" title="">
</div>
</div>
The CSS are located in the style.css line 187.
I appreciate if you do a live edit. Thanks in advance
<div class="image" id="homepage-image">
<div style="height: 520px; overflow: hidden; white-space: nowrap;">
<span class="keepImgVerCenter"></span>
<img src="photo/homepage/image.jpg" alt="" title="">
</div>
</div>
.keepImgVerCenter{
display: inline-block;
height: 100%;
vertical-align: middle;
}
Hope this helps.
I have in a problem with centering an image.Hence I have many div and in every div have two div that is divided into two.In those two div I will show two image.Each of these two div is 300 pixel.Problem is images may be small or 300 pixel and I have to show images center if small and if image is 300 then automatically sit on full div. Can anyone help me to do this?
Here is the code..
<div style="margin-top:10px;height: 300px;width: 600px;background: whitesmoke">
<div style="float:left;width: 300px;height: 300px;">
<img class="" src="images/productImages/medium/<?php echo $product1['product_image']?>" alt="image_01" width="" height="" />
</div>
<div style="float:right;width: 300px;height: 300px;">
<?php if(!empty($product2)) { ?>
<img class="" src="images/productImages/medium/<?php echo $product2['product_image']?>" alt="image_02" width="" height="" />
<?php } ?>
</div>
</div>
you have to position the parent with "relative" and than you can handle the IMGs with position "absolute" ;)
take a look at this fiddle
.CenterMe {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
You should use display: table-cell; for the parent element and than use max-height and max-width properties for your img tag.. This way you can align the images vertically as well as horizontally.
Demo
div {
width: 300px;
height: 300px;
display: table-cell;
border: 1px solid #f00;
text-align: center;
vertical-align: middle;
}
div img {
max-height: 100%;
max-width: 100%;
}
But if you are looking to align images only horizontally and not vertically, than you won't need to do much, just declare text-align: center; on the parent element.
Use image as background and set position to center:
<div style="margin-top:10px;height: 300px;width: 600px;background: whitesmoke">
<div style="float:left; width: 300px; height: 300px; background-image: url('images/productImages/medium/<?php echo $product2['product_image']?>'; background-position: center center; background-repeat: no-repeat;">
</div>
<!-- etc. -->
</div>
just add text-align:center to your image container:
<div style="float:left;width: 300px;height: 300px; text-align:center">
<img class="" src="images/productImages/medium/<?php echo $product1['product_image']?>" alt="image_01" width="" height="" />
</div>
okay, considering your images and condition are both dynamic, modify your inline css to :
<div style="margin-top:10px;height: 300px;width: 600px;background: whitesmoke;text-align:center">
added : text-align:center
Fiddle