digitalFAQ.com Forum - CSS DIV styling to center a vertical image?

digitalFAQ.com Forum (https://www.digitalfaq.com/forum/)

- Web Development, Design (https://www.digitalfaq.com/forum/web-design/)

- - CSS DIV styling to center a vertical image? (https://www.digitalfaq.com/forum/web-design/4751-css-div-styling.html)

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.

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.

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

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:

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>

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.)

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 06:33 PM