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 Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/ 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. Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/#findComment-1193032 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? Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/#findComment-1193046 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. Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/#findComment-1193053 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] Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/#findComment-1193278 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. Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/#findComment-1193306 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 Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/#findComment-1193327 Share on other sites More sharing options...
cssfreakie Posted March 28, 2011 Share Posted March 28, 2011 wicked! Link to comment https://forums.phpfreaks.com/topic/231890-vertically-align-text/#findComment-1193341 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.