2 images horizontally aligned center

Quote

Post by startom » Mon Oct 28, 2013 1:25 am

Hello,

I want to align two images on the same line in the description of my products. I managed unless they are aligned left and impossible to align the center.

Here's the code:

Code: Select all

<div style="margin: 10px 20px 10px 0px; float: left; text-align: center; color: rgb(0, 0, 0); font-family: 'Trebuchet MS', Verdana, 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0.10000000149011612px;">
	<a href="http://cdn.webamine.fr/packweb/images/comment-ca-marche-cours.jpg" style="color: rgb(0, 106, 179); text-decoration: none; font-weight: bold;" title="Exemple de page de cours de code de la route"><img alt="Exemple de page de cours de code de la route" height="150" src="http://cdn.webamine.fr/packweb/images/comment-ca-marche-cours-mini.jpg" style="border: 0px;" width="227" /></a><br />
	<span style="font-size: 0.7em; color: rgb(133, 133, 133);">Exemple de page de cours</span></div>
<div style="margin: 10px 20px 10px 0px; float: left; text-align: center; color: rgb(0, 0, 0); font-family: 'Trebuchet MS', Verdana, 'Lucida Grande', Tahoma, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0.10000000149011612px;">
	<a href="http://cdn.webamine.fr/packweb/images/comment-ca-marche-test.jpg" style="color: rgb(0, 106, 179); text-decoration: none; font-weight: bold;" title="Exemple de page de test de code de la route"><img alt="Exemple de page de test de code de la route" height="150" src="http://cdn.webamine.fr/packweb/images/comment-ca-marche-test-mini.jpg" style="border: 0px;" width="260" /></a><br />
	<span style="font-size: 0.7em; color: rgb(133, 133, 133);">Exemple de test de code</span></div>
Could you help me please?

Regards,

startom
startom
Newbie
Posts
14
Joined
Wed Oct 23, 2013 7:32 pm
Top

Re: 2 images horizontally aligned center

Quote

Post by butte » Mon Oct 28, 2013 8:58 am

There is a way, often frowned upon nowadays, that always did work and works now and is a quick fix while you are starting out. You can put them side by side between opening <center> and closing </center>. You can put the labels similarly centered above or below them, separated by 2-4 <br />. You can instead make each image and its label clickable as a unit, by putting each in its own side-by-side cell in a small table of one row (table, tr, td, BINGO, /td, /tr, /table), with its own label above or below it with 2-4 <br />, giving each td align=center and centering the entire table. Use Source mode.

Once you have what you want centered, then you can placidly tinker with ways to put and keep it there. You'll quickly figure out by tinkering what you can do with it. What you were trying above to make work is heading there but slowing you down for the sake of getting the images centered n-o-w. Both .css and in-line style are your friends; but sometimes they mess with your dog, beer, or pizza.
butte
Guru Member
Posts
7059
Joined
Wed Mar 20, 2013 6:58 am
Top

Re: 2 images horizontally aligned center

Quote

Post by wiredleaf » Mon Oct 28, 2013 10:28 am

Ah, CSS is my specialty.

Can you give me the page you are wanting to this?

As a general rule, you need to put a DIV around your images you want to center. I've done this a few times on my own website on custom pages. Something like this.

Code: Select all

<div id="imagewrapper">
<img src="image1">
<img src="image2">
</div>
You then want to go into your stylesheet.css, typically found in catalog/view/theme/default/stylesheet/stylesheet.css.

You will need a file viewer like FileZilla to do this. Do you have FileZilla?

Then in that make a call for your new DIV in the stylesheet.css. It can go anywhere like this:

Code: Select all

#imagewrapper {
     display: block;
     width: 300px;
     margin: 0 auto;
}
#imagewrapper = It calls the DIV you created in your product description.
Display = It turns your images into BLOCK elements, rather than INLINE which means it starts on a new line.
Width = Images should always have a width and height.
Margin = This centers anything. 0 is calling top and bottom, AUTO is left and right, making it center.

This will center the images. If it doesnt, let me know, as this is usually used just for the one image, so I am not sure with two images without testing it myself.

Image

http://www.wiredleaf.co.uk

wiredleaf
Newbie
Posts
19
Joined
Mon Oct 21, 2013 6:39 am
Top

Re: 2 images horizontally aligned center

Quote

Post by butte » Mon Oct 28, 2013 11:51 am

He already has classic div and span, which with in-line style, and blank class and id, do not require a declared .css or unique in-line class and id. It isn't working, notwithstanding the float in the way. What he needs at the moment is summary centering of two images, and the simple approach centers 1 to N images. He assigned href, width, height for each image. He could remove the central </div and <div so as to combine them, and watch the result. He seems to be making rapid headway. Right now he just wants the pair centered, and html center is as simply straightforward as dealing with a throne in the dark.

I would be even less inclined to rely upon margins f-o-r primary centering than I would be inclined to use FileZilla as an image viewer. (See sourceforge.net/projects/filezilla/.)
butte
Guru Member
Posts
7059
Joined
Wed Mar 20, 2013 6:58 am
Top

Re: 2 images horizontally aligned center

Quote

Post by startom » Mon Oct 28, 2013 2:54 pm

So what should I do?
startom
Newbie
Posts
14
Joined
Wed Oct 23, 2013 7:32 pm
Top

Re: 2 images horizontally aligned center

Quote

Post by butte » Mon Oct 28, 2013 9:18 pm

Initially, startom, separate your pair into two cells, each with image and label. This old fashioned (pre-html5 while html5 is not even "official" yet) approach should force the pair to center, each separate with its own label below the image. You'll see successive centering, those could each do the trick but this way you'll see where each goes (in TD the part that counts is <TD>). (Ordinarily CAPS and lower case do not matter but what falls inside quotation marks should usually be lower case; here, doesn't matter.) The <table opens table, <tr opens tablerow, <td opens tablecell; </each closes it. Since <a (called anchor) precedes image and </a> trails label, each side should be clickable as an image+label unit. Your own stuffing (you posted it above) starts with <div, goes where [. . .] indicates, and ends with </div> in each image+label pair.

<TABLE><TR>
<TD align="center" style="align: center; text-align: center;"><CENTER>
<div [. . .] </div>
</CENTER></TD>
<TD align="center" style="align: center; text-align: center;"><CENTER>
<div [. . .] </div>
</CENTER></TD>
</TR></TABLE>

Then with that out of the way you can tinker at leisure with how to make it work without the table cells. I'll stuff in a suggestion on that in a while, this is just to try to get you going for the moment in order to end your frustration.
butte
Guru Member
Posts
7059
Joined
Wed Mar 20, 2013 6:58 am
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 18 guests