?
Solved

How can I center this image?

Posted on 2013-10-29
8
Medium Priority
?
299 Views
Last Modified: 2013-10-29
Take a look at the screen shot that I have attached.

I'm trying to center the logo in the div that I currently have scripted with a grey background so I can see what I'm doing.

This is a mobile dynamic and I was hoping that I could include some inline css so I don't have to update eight different containers, but whatever works - I'm open to it.

Bottom line: I need to make sure that my image is vertically and horizontally centered even if it's less than 65 px tall. I've played with the intuitive stuff (vertical-align:middle;), but that doesn't seem to make a difference.

Here's the css to my logo container:

#logo {
position:absolute;
margin-top:54px;
margin-left:90px;
width:220px;
height:65px;
text-align:center;
background-color:#cccccc;
}

...and here's the html to the logo image:

<div id="logo">
            <div style="position:absolute; vertical-align:middle;"><A HREF="http://nawilliams.com" target="_blank"><IMG SRC="../logos/10.jpg" height="30" width="220" border="0"></a></div>
            </div>

What do you think? How can I get this to behave?
Screen-Shot-2013-10-29-at-11.52..png
0
Comment
Question by:brucegust
  • 4
  • 4
8 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39609396
Without seeing context...

#logo div {
    display: table-cell;
    height: 65px;
    vertical-align: middle;
}
0
 

Author Comment

by:brucegust
ID: 39609787
Gary, I think we're close, but it's still not quite there.

I've made a separate directory so you can see exactly what I'm dealing with.

Head out to http://myqardboard.com/test/profile.php?id=10

At one point, I took your counsel and I attempted to put the whole image in the context of a table and I coded it like this: <table style="margin:auto;width:220px;height:65px;border-spacing:0;border-collapse:collapse;"><tr><td><IMG SRC=myimage></td></tr></table>

It worked! But then my divs below it went south and the spacing go all jacked up.

What do you think?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609810
Fix your html first, you have an opening anchor tag with a closing tag.

<div id="picture"><A HREF="http://www.myqardboard.com/qr/index.php?id=10"><IMG SRC="../Photos/crop.php?h=65&w=65&f=10.JPG" border="0"></div>
<div id="logo">



Targetted the wrong element

#logo div a {
    display: table-cell;
    height: 65px;
    vertical-align: middle;
}
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:brucegust
ID: 39610485
Gary, it works! But I've got another dynamic where it's not a link and while it should be cake and ice cream, when I make my regular #logo div include the display:table-cell and vertical-align dynamic, it doesn't have an impact.

I've changed my test site to reflect the other dynamic I need to accommodate. Would you be willing to look at it and tell me how I need to make that one last adjustment on my stylesheet to ensure the image is centered, even when it's not associated with a link?

Thanks!

Same page: http://www.myqardboard.com/test/profile.php?id=10
0
 
LVL 58

Expert Comment

by:Gary
ID: 39610496
Just apply the following to the table cell

   height: 65px;
0
 

Author Comment

by:brucegust
ID: 39610519
Gary, I'm a moron and I admit it freely...

My html right now is:

<div id="logo">
            <IMG SRC="../logos/10.jpg" height="30" width="220">
            </div>

The css associated with #logo is:

#logo {
position:absolute;
margin-top:54px;
margin-left:90px;
width:220px;
height:65px;
text-align:center;
vertical-align:middle;
background-color:#cccccc;
}

When you say "table cell," I'm looking for a table and I don't see one.

This is probably ridiculously elementary, but there it is.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39610557
I was looking at the wrong element

You will have to add another div and then apply the table styling to it e.g.

<div id="logo">
	<div style="vertical-align: middle; display: table-cell; height: 65px;">
		<img width="220" height="30" src="../logos/10.jpg" style="vertical-align: middle; margin: auto;">
	</div>
</div>

Open in new window

0
 

Author Comment

by:brucegust
ID: 39610570
That did it!

Thanks!
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month5 days, 22 hours left to enroll

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question