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
Related
Image example of what I need
I basically copied the code off of a YouTube video. I am a rookie so try and explain as easily as possible how to stack two images on top of each other.
They are the same width and same height images and need to be aligned horizontally and vertically.
.image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -260px;
}
<div class="image">
<img src="car.png">
</div>
There are a few ways to do this. The most simple would probably be to edit your CSS to do the following:
CSS:
.image {
width: 100%; /* Image container is now full-width */
}
.image img {
margin: 40px auto; /* "auto" will center block elements */
display: block; /* Set images to be "block" so they obey our auto margin */
}
HTML:
<div class="image">
<img src="path/to/image1.jpg">
<img src="path/to/image2.jpg">
</div>
JSFiddle
For horizontal and vertical centering:
While some may prefer the flex method, I prefer the table-cell method for simple alignment. Try this:
CSS:
.image {
width: 100%;
height: 500px /* Modify this to fit your needs */
display: table;
}
.image .centered {
display: table-cell;
vertical-align: middle;
}
.image .centered img {
margin: 40px auto;
display: block;
}
HTML:
<div class="image">
<div class="centered">
<img src="http://fillmurray.com/360/100">
<img src="http://fillmurray.com/360/100">
</div>
</div>
JSFiddle
If the question is only to put second image under the first just br tag
If the question is to make on blank page 2 images in center one under one:
<table style="width: 100%; height: 100%; border-spacing: 0px; border-collapse: collapse; padding: 0px; margin: 0; border: 0;">
<tr style="height: 100%">
<td style="text-align: center; vertical-align: middle; height: 100%;">
<img src="1.jpg" /><br><br>
<img src="2.jpg" />
</td>
</tr>
</table>
For body and html you need also height: 100%
I'm pretty sure all positioning is possible with div so probably I'm complicated with tables but I was too tired to find the code for vertical positioning so I used tables in my work.
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
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'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.