I have rows of product thumbnails with the product text below. See here
Since the images have different heights the text is not always vertically aligned in the right place. I just changed the layout from tables to divs because it's easier and more modern.
I've worked through several examples, websites, and this site but still haven't found a way to align this correctly. I'd like the image aligned in the middle of the div and the text at the very bottom.
Here's the DIV code (very simple):
<div style="float:left; width:210px; height:200px; text-align:center;" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/"><img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" /></a>
Alton Banquette
</div>
It works fine on this page since the images are all the same height
Is there a simple solution to this? I like DIVS better but this wasn't a problem when everything was table cells since I could use valign=center, etc.
Thank you!
Always assign a class and organize your code , always wrap your text to avoid glitches:
<div class="wrap" >
<a title="Alton Banquette" href="http://test.pillarsoflifebook.com/banquettes/designer-banquettes/alton-banquette/">
<img alt="" src="/wp-content/uploads/2013/10/ALTON-SETTEE_THUMB.gif" width="150" height="150" border="0" />
</a>
<p>Alton Banquette</p>
</div>
.wrap
{
float:left; width:210px; height:200px; text-align:center;
}
}
.wrap p
{
display:block;
}
img
{
height:100% !important;
width:auto;
}
Fiddle Demo
so whenever you change the image height , text will always remain at bottom.
Related
I want to make the grey images center aligned. Please guide me how can I do this.
Here is what I have tried:
<div id="responsivearea" style="margin-top: 50px;">
<div class="img-center">
<img style="clear:none;" class="size-thumbnail wp-image-2707" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/visa-logo2-150x150.jpg" alt="visa logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2705" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/nethope-logo1-150x150.jpg" alt="nethope logo" width="150" height="150" />
<img style="clear:none;" class="size-thumbnail wp-image-2704" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/ILO-logo1-150x150.jpg" alt="ILO logo" width="150" height="150" />
</div>
</div>
Here is the site.
Simply use:
.img-center{text-align: center;}
As suggested already, magin auto... using your existing img-center class
.img-center{
margin:auto;
vertical-align:middle; /* If you mean vertically aligned */
}
text-align can work but is a little funny in cross browser support...
margin auto generally does the job and should work
otherwise just wrap them with center tags, while people may frown upon using center tags..THEY WORK CROSS BROWSER!! so they will NOT fail!
Otherwise, if you mean the footer images/logos on the site.. They are in a P tag without any class.. You can simply apply a text-align:center: to that p tag.
Set margin to auto. The browser will align the images to center for you
img {
margin: auto;
}
I have a DIV named mediashelter and there are four small photos inside the DIV
#mediashelter
{
width:200px;
height:300px;
background-color:black;
}
and inside the div are four small pictures placed vertically using
<div id="mediashelter" >
<img src="./images/fubu.jpg"><br>
<img src="./images/li.jpg"><br>
<img src="./images/t.jpg"><br>
<img src="./images/g.jpg">
</div>
how do I center the four small pictures inside the black rectangle named mediashelter? Thanks a lot once again
If you add text-align: center to #mediashelter, it works perfectly.
Fiddle:
http://jsfiddle.net/3Ff63/
Try this:
<div id="mediashelter" align="center">
I have a page where there are two images on top which are floated to left and right as below :
.floatLeft{ float:left;}
.floatRight{ float:right; }
<div>
<img src="firstImage" class="floatLeft"/>
<img src="secondImage" class="floatRight"/>
<!-- wright here -->
</div>
Issue is when i write anything after images (be it in div or a plain text ) and if it goes beyong page width ,
the text after maximum width shifts downwords entirely after images . That is text doesn't wrap inbetween two images
What i understand about float is text should "FLOW" in between two images (unless we use clear which "clears" area around images ) , but its not working like that.
I want to have a text in between two images.
Any help is higly appreciated as a I have done a lot of efforts but it is not working.
Logically, you have 3 blocks of data here, so I suggest using 3 floating divs with set width:
.floatLeft{ float:left}
.div1{width:X%}
.div2{width:Y%}
.div3{width:Z%}
.overflow{overflow: hidden} /* this is optional */
<div class="overflow">
<div class="floatLeft div1">
<img src="firstImage"/>
</div">
<div class="floatLeft div2">
<!-- text here -->
</div">
<div class="floatLeft div3"><!-- or make it float right if you want -->
<img src="secondImage"/>
</div">
</div>
If you want your images a fixed width, try using CSS calc:
.div1{width:100px}
.div2{width:-moz-calc(100%-300px);-webkit-calc(100%-300px);calc(100%-300px);} /* not supported in some browsers */
.div3{width:200px}
But honestly I recommend to go classic way and use a table here:
.table {width:100%;border-collapse:collapse}
.table td {padding:0;margin:0}
.block1 {width:X%} /* or width:Xpx */
.block3 {width:Z%} /* or width:Zpx */
/* do not touch block2 here */
<table class='table'>
<tr>
<td class='block1'>
<img src="firstImage"/>
</td>
<td class='block2'>
<!-- text here -->
</td>
<td class='block3'>
<img src="secondImage"/>
</td>
</tr>
</table>
Remember to wrap your content in "blocks", it always helps when you mark up.
I guess this is the answer that you need jsfiddle
I will explain a little about.
in your div add a class of imgcontainer
in your css, add the following
.imgcontainer{
position:relative;
}
you can add the width of the div, in jsfiddle I set it as 150px. and each of the image is 50px. there you add paragraph with some text
Try this way
<div>
<img src="firstImage" class="floatLeft"/>
<p class="floatLeft">Some textgoes here</p>
<img src="secondImage" class="floatRight"/>
</div>
but give proper width
Another variation is using a CSS version of the table approach proposed by igorpavlov. You have to replace the table/tr/td by divs and to adapt the CSS as proposed here :
.table {width:100%; display: table;}
div{ display: table-cell; vertical-align: top;}
.block1 {width:33%} /* or width:Xpx */
.block3 {width:33%} /* or width:Zpx */
img {width: 100%; height: auto;}
<div class='table'>
<div class='block1'>
<img src="firstImage"/>
</div>
<div class='block2'>
<!-- text here -->
</div>
<div class='block3'>
<img src="secondImage"/>
</div>
</div>
It provides better semantics and works IE8+!
I'm having a bit of trouble getting the various products to line up properly on my site. Some of the items have a name long enough to create a second line of text, and when it does so, the items still align with the top of the text rather than aligning the top of each image. Basically I want it to use up some of the empty space above each div to fit a second line of text, rather than pushing my picture down and just aligning at the top. This is the code I'm using to create the divs in a loop within my PHP:
<div class="new_prod_box">
<a href="details.html">
'.$title.'
</a>
<div class="new_prod_bg">
<a href="details.html">
<img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
</a>
</div>
<a href="cart.php?action=add&id='.$id.'">
<u>Add to cart</u>
</a>
</div>
Here's a picture explaining what I mean: my website
Here's the rules in my CSS:
.new_prod_box{
float:left;
text-align:center;
padding:10px;
width:132px;
height:180px;
}
.new_prod_box a{
padding:5px 0 5px 0;
color:#b5b5b6;
text-decoration:none;
display:block;
}
.new_prod_bg{
width:132px;
height:119px;
text-align:center;
background:url(images/new_prod_box.gif) no-repeat center;
position:relative;
}
Hmmm, if I understand your issue correctly, giving .new_prod_box > a:first-child (selects only the first, top-level <a> element inside .new_prod_box) a defined height should give you what you want. As long as the height is great enough to fit two lines of text in it, it'll keep the elements below in the same position, but still leaves space for the title to break to two lines.
If that isn't what you're looking for, let me know and I'll be happy to help further!
(Edit:) To align single-line titles to the top of the image (rather than having whitespace between them), you could try this method, which I think will work.
First, modify your HTML structure a bit, to add a <span> inside of the first <a> element:
<div class="new_prod_box">
<a href="details.html">
<span>
'.$title.'
</span>
</a>
<div class="new_prod_bg">
<a href="details.html">
<img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
</a>
</div>
<a href="cart.php?action=add&id='.$id.'">
<u>Add to cart</u>
</a>
</div>
Then, add/modify these styles in your CSS:
.new_prod_box > a:first-child{
height: [tall enough for two lines];
position:relative;
}
.new_prod_box > a:first-child span{
display:block;
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
Which I believe should give you what you want. Try it out though, and let me know what happens.
I just finished my captcha script so it has the captcha image then next to it I have a link that is a small image that can be clicked to refresh the image to a new one.
I am wanting to make this small image be on top, on the bottom left corner of the large image, can someone help me with the CSS? Below is my complete code
<img src="captcha.php?sid=<?php echo md5(uniqid(time())); ?>" id="image" align="absmiddle" />
<a href="#" onclick="document.getElementById('image').src = 'captcha.php?sid=' + Math.random(); return false">
<img src="refresh.gif" alt="Reload a new image" border="0">
</a>
HTML
<div id="images-container">
<img src="image-big.png" alt="Big Image" id="big-image">
<img src="image-small.png" alt="Small Image" id="small-image">
</div>
(if you are using XHTML, don't forget to change the end of the image tag to use /> instead of >
CSS
#images-container {
position:relative;
}
#big-image {
position:absolute; /* position:absolute aligns to the parent container
which in the HTML above is the <div> element */
bottom:0;
left:0;
z-index:0;
}
#small-image {
position:absolute;
bottom:0;
left:0;
z-index:1;
}
The important thing for the z-index is that #small-image has a higher number than #big-image . If your repeating this effect, use classes instead of ids.
You'll want to use the CSS z-index property to set which image will display on top of the other:
http://www.w3schools.com/Css/pr_pos_z-index.asp
You'll probably want to use relative or absolute positioning to position the small image:
http://www.w3schools.com/Css/css_positioning.asp
I think what you need to do is to set css property position: relative; to #images-container div, and leave the other css rules as they were.
If you do that the images will be absolutely positioned but relative to their parent div instead of the body(whole screen).
Well.. good luck!
Z-index stuff can get sloppy in my experience. Why not just use an inline style to set your captcha as the background image of a div? Something like so:
<div id="image" style="background: url(captcha.php?sid=<?php echo md5(uniqid(time())); ?>) no-repeat; width: 100px; height: 100px;" id="image" align="absmiddle" >
<img src="refresh.gif" alt="Reload a new image" border="0" onclick="document.getElementById('image').style.backgroundImage = 'captcha.php?sid=' + Math.random(); return false">
</div>