Solved

How can I center this image?

Posted on 2013-10-29
8
288 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
Comment Utility
Without seeing context...

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

Author Comment

by:brucegust
Comment Utility
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
Comment Utility
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
 

Author Comment

by:brucegust
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:Gary
Comment Utility
Just apply the following to the table cell

   height: 65px;
0
 

Author Comment

by:brucegust
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
That did it!

Thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now