Solved

How can I center this image?

Posted on 2013-10-29
8
293 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 500 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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

623 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