digitalFAQ.com Forum

digitalFAQ.com Forum (http://www.digitalfaq.com/forum/)
-   Web Design + Site Planning (http://www.digitalfaq.com/forum/web-design/)
-   -   CSS DIV styling to center a vertical image? (http://www.digitalfaq.com/forum/web-design/4751-css-div-styling.html)

Dusty.Doddridge 11-20-2012 05:28 AM

CSS DIV styling to center a vertical image?
 
Quick question and I'm sure the answer is easy…but…

Am trying to place some vertical images in my table which we styled like this to create space between the images.
HTML Code:

<div style="margin-top:30px;"></div>
Is there a way to individually center a vertical image? Right now, it's pushed to the left of the table cell.

kpmedia 11-20-2012 05:33 AM

Yep, it is an easy one. :congrats:

What we had setup is a single table column, and inside it used HTML for doing two things: CSS spacing and calling images. It alternated down the page: space, image, space, image, space, image. (For anybody else reading, the CSS was inline to keep it easy for the end-user to copy/paste, and have the ability to alter, without having to edit any style sheet.)

Instead of DIV then IMG, let's wrap the IMG in a DIV. :hmm:

Old:
HTML Code:

<div style="margin-top:30px;"></div><img src="path/to/image.jpg">
New:
HTML Code:

<div style="margin:30px auto 0;"><img src="path/to/image.jpg"></div>
There's no "center" command in CSS -- stupid, yes -- but the workaround is to "auto" with margins. (The only downside to this is that only the top and left margins can then be specified. However, it's not a problem for this specific usage. The workaround to that workaround is to double wrap a DIV inside another DIV. Isn't CSS fun! :screwy:)

Anyway, that simple nesting of the IMG tag inside the DIV should do exactly what you want. :)


____________


Need a good web host? — Read our 2018 Review of the Best Web Hosts
Quite often, problems with web sites are caused by having a rotten web host. Worse yet, many hosts try to blame you (the customer) for the problems! So dump that lousy company. Say goodbye to slow sites, unresponsive support techs, and downtime. Find yourself a new host today. Whether you need shared, reseller, VPS, semi-dedicated, cloud, or dedicated hosting, something on our list should be a good upgrade for you.


Dusty.Doddridge 11-20-2012 08:16 PM

Hey Chief--

Thanks for the advice. Looks like the fly is still in the CSS ointment? Or maybe the table style ointment?

Here's the code, I'll adjust the link later:
HTML Code:

<a href="http://dustydoddridge.photoshelter.com/gallery-image/Canyonlands-of-the-Southwest/G000036j5XZFn1.4/I0000pRjGloU38LU" target="_blank"></a>
<div style="margin:30px auto 0;"><img src="http://focalpointacademy.com/wp-content/uploads/2012/11/dd_20121109_9376_master.jpg"></div>

link so you can see the result:
http://focalpointacademy.com/photo-w...hwest-usa.html

kpmedia 11-21-2012 08:06 AM

Your code is in the wrong order.
What you're trying to do in that code is make a DIV have a link -- and that's not going to work.

This is the proper order:
HTML Code:

<div style="margin:30px auto 0;">
<a href="http://dustydoddridge.photoshelter.com/gallery-image/Canyonlands-of-the-Southwest/G000036j5XZFn1.4/I0000pRjGloU38LU" target="_blank">
<img src="http://focalpointacademy.com/wp-content/uploads/2012/11/dd_20121109_9376_master.jpg">
</a>
</div>

In plain English, the code can be interpreted as such:
  • DIV = Open a box, put my content (linked image) in it.
  • MARGIN 30px = Also make the box have breathing room above it.
  • MARGIN AUTO = center it
  • A HREF = Link my content (image) to some other webpage. Anything after this, but before the /A, is linked to it.
  • TARGET _BLANK = Open my link in a new window.
  • IMG SRC = Put my image here.
  • /A = Done linking content.
  • /DIV = Close the box.
If it's not done in the proper order, it won't work right. Like trying to put peanut butter on bread before sticking it in the toaster. :screwy:

Easy. :congrats:

Dusty.Doddridge 11-21-2012 12:23 PM

Thanks chief--

Still not behaving so maybe there is some peanut butter in the toaster...

Code as it appears in the table:
HTML Code:

<div style="margin:30px auto 0;"> <a href="http://dustydoddridge.photoshelter.com/gallery-image/Canyonlands-of-the-Southwest/G000036j5XZFn1.4/I0000pRjGloU38LU" target="_blank"> </a><img src="http://focalpointacademy.com/wp-content/uploads/2012/11/dd_20121109_9376_master.jpg"> </div>

lordsmurf 11-21-2012 12:43 PM

1 Attachment(s)
This one, right?

Attachment 3117

There may be some competing CSS going on, between the theme, the tables plugin, and the manual CSS. And it may be uncorrectable. Or at very least, hard as hell to adjust, without entirely rewriting lots and lots of CSS.

- Perhaps don't use verticals?
- Or simply live with it being left justified? (I think it looks fine that way.)

Dusty.Doddridge 11-21-2012 03:59 PM

Thanks lordSmurf--

Yep, will probably not use verticals in the end. Could also do a workaround in PS but not worth the time. Will probably just stick with the horziontals...

--DD


All times are GMT -5. The time now is 10:28 PM

Site design, images and content © 2002-2019 The Digital FAQ, www.digitalFAQ.com
Forum Software by vBulletin · Copyright © 2019 Jelsoft Enterprises Ltd.