Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 07-26-2009, 11:35 PM
Leon Leon is offline
v7n Mentor
 
Join Date: 10-13-03
Location: Atlanta, GA
Posts: 670
iTrader: 0 / 0%
[CSS] Center Vertical with Image + Text

Okay so Here's what I've got going on.

This is what I would like:


This what I am getting:


The code behind this is:
Code:
// CSS Start #incubatorSideBar li img { margin: 0 15px 0 0; vertical-align: middle; } #incubatorSideBar li p { margin: 0; padding: 0; } // CSS End // HTML Start <li><img src="template/micro_content/graph.png" border="0" /><p>Birthing Statistics</p></li> // HTML End
I can make it work by doing this:
Code:
#incubatorSideBar li img { margin: 0 15px 0 0; } #incubatorSideBar li p { display: table-cell; height: 60px; vertical-align: middle; margin: 0; padding: 0; } // HTML Start <li><img src="template/micro_content/graph.png" border="0" /><p>Birthing Statistics</p></li> // HTML End
Problem is the Text and the Image are suppose to be a link which does this:
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 07-27-2009, 12:03 AM
Tomassi's Avatar
Tomassi Tomassi is offline
v7n Mentor
 
Join Date: 01-26-06
Location: Alkmaar
Posts: 2,504
iTrader: 0 / 0%
Adding a float:left; in the image div should do the trick
Or something like
#incubatorSideBar li{
float:left;
}
 
Reply With Quote
  #3  
Old 07-28-2009, 07:06 AM
Izzmo's Avatar
Izzmo Izzmo is offline
v7n Mentor
 
Join Date: 11-01-03
Location: Kansas
Posts: 1,356
iTrader: 1 / 100%
^ what he said.

In a case like this you need to have a container element (p or div) and then have the image inside that, then add another element (p most likely) to put your text in. Float the image to the left and then if you want the text vertically aligned to the middle, do a vertical-align: middle on the image.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
image in center horizontally and vertically jonathangalt Web Design Lobby 8 08-14-2008 09:43 PM
How to center an image in CSS? Ryodlog Coding Forum 4 07-12-2008 07:46 AM
Vertical rendering of background image Firefox/IE worldly1 Web Design Lobby 2 10-31-2007 04:50 PM
Center Table/Text in 2 Columns kwvarga Web Design Lobby 4 08-16-2006 09:13 AM
Center text in html mybluehair Coding Forum 2 05-27-2006 07:49 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 08:53 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC