Destramic Posted March 27, 2011 Share Posted March 27, 2011 hey guys i have an image and some text inside a div but i want to be able to align the text vertically do it is in the middle of the image...if someone could help that would be great <div id="add_game_types"><img src="add2.gif" data-hover="add.gif" /> Add Game Type</div> css: div#add_game_types, #remove_game_types { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; vertical-align: text-top; cursor:pointer; } thank you Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 27, 2011 Share Posted March 27, 2011 Is the height and width of the image the same everytime? quite some ways how this can be done. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 27, 2011 Share Posted March 27, 2011 Is the height and width of the image the same everytime? quite some ways how this can be done. or maybe have an online example or image? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 27, 2011 Share Posted March 27, 2011 before you are going to try this out, with vertical align, which i think you want, maybe have a read here: http://phrogz.net/css/vertical-align/index.html anyways it really depends on your situation. There are quite some ways to do this, but without a preview link this will be guessing. Quote Link to comment Share on other sites More sharing options...
Destramic Posted March 28, 2011 Author Share Posted March 28, 2011 hes is the image...you'll see the text add game type and remove game type and the images...thank a lot [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 28, 2011 Share Posted March 28, 2011 Well, it seems you didn't read the article i provided, because since your using 1 line of text + image here you can set a line-height of for instance a span element (displayed as block) and it will automatically align the text to the middle. Try out the following hope it works for you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="cfss/style.css" /> <title>buttons</title> <style type="text/css"> body, p#buttons, p#buttons2{ margin:0; padding:0; } p#buttons span{ display: block; line-height: 48px; /*same as image height */ background:red; } p#buttons img{ float:left; margin-right:5px; } /* method 2 */ p#buttons2 { line-height: 48px; /*same as image height */ background:red; } p#buttons2 img{ float:left; margin-right:5px; } </style> </head> <body> <p id="buttons"> <img src="http://tinyurl.com/6zrgusv" alt="" /><span>some text</span> <img src="http://tinyurl.com/6zrgusv" alt="" /><span>some more text</span> <img src="http://tinyurl.com/6zrgusv" alt="" /><span>even some more text</span> </p> <br /> <p id="buttons2"> <img src="http://tinyurl.com/6zrgusv" alt="" /><span>some text</span><br /> <img src="http://tinyurl.com/6zrgusv" alt="" /><span>some more text</span><br /> <img src="http://tinyurl.com/6zrgusv" alt="" /><span>even some more text</span><br /> </p> </body> </html> AN online example is always nice to provide btw in the html/css section. Quote Link to comment Share on other sites More sharing options...
Destramic Posted March 28, 2011 Author Share Posted March 28, 2011 i got that working great with that code thanks alot CSSFREAKIE Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 28, 2011 Share Posted March 28, 2011 wicked! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.