davej Posted June 14, 2013 Share Posted June 14, 2013 In order to center text under an uncentered image is it necessary to float the image? I see that works but is it necessary? Thanks. Link to comment Share on other sites More sharing options...
leev18 Posted June 15, 2013 Share Posted June 15, 2013 (edited) In order to center text under an uncentered image is it necessary to float the image? I see that works but is it necessary? Thanks. I don't see it unnecessary. Here's another known way you can do it differently: Demo/Codes: http://jsfiddle.net/yUjC7/ | fullscreen: http://jsfiddle.net/yUjC7/embedded/result/<!DOCTYPE html><html><head> <style type="text/css">.clearboth { clear: both;} .images { display: table; float: left; margin-right: 5px; padding: 5px; border: solid 1px #cccccc;} .images img { height: 200px;} .image-title { font-family: arial; font-size: 8pt; font-weight: bold; text-align: center;}</style> </head><body> <div class="images"> <img src="http://i379.photobucket.com/albums/oo232/Sa-Yu/childs/Young_Ayu_Tsukimiya_Kanon_game-2.jpg" /> <div class="image-title">Ayu Tsukimiya</div></div> <div class="images"> <img src="http://i40.photobucket.com/albums/e219/doggiequeen910/Anime/clannad/renderfornunu.png" /> <div class="image-title">Nagisa Furukawa</div></div> <div class="images"> <img src="http://i276.photobucket.com/albums/kk39/hnanimegrl88/blonde%20girls/1130450283_cturesGirl.jpg" /> <div class="image-title">Random Anime Girl</div></div> <div class="clearboth"></div> Content Area </body></html> Edited June 15, 2013 by leev18 Link to comment Share on other sites More sharing options...
davej Posted June 15, 2013 Author Share Posted June 15, 2013 (edited) If you put an image and a title inside a one-celled table, and then apply text-align-center, this works, but it seems like there should be several other ways to do this. <!DOCTYPE html><html lang="en"><head><style>td {text-align: center;border: thin solid #999;padding: 10px;}</style></head><body><table><tr><td><img src="http://i40.photobucket.com/albums/e219/doggiequeen910/Anime/clannad/renderfornunu.png" /><br/><p>Comment</p></td></tr></table></body></html> Oh I see that is what you are saying, in the form of... <!DOCTYPE html><html lang="en"><head><style>span {display: table;text-align: center;line-height: 5px;border: thin solid #999;padding: 10px;}</style></head><body><span><img src="http://i40.photobucket.com/albums/e219/doggiequeen910/Anime/clannad/renderfornunu.png" /><br/><p>Comment</p></span></body></html> Edited June 15, 2013 by davej Link to comment Share on other sites More sharing options...
dsonesuk Posted June 15, 2013 Share Posted June 15, 2013 With the table the cell wraps to the size of content, a block element width extends to the width of the parent element it is within, to achieve a similar result use float OR display:inline-block on an block element outer container. .ex1 { float: left; text-align:center;border: thin solid #999;padding: 10px}.ex1.ex2 { float: none; display:inline-block;} <div class="ex1"><img src="http://i40.photobucket.com/albums/e219/doggiequeen910/Anime/clannad/renderfornunu.png" /><p>Comment</p></div><div class="ex1 ex2"><img src="http://i40.photobucket.com/albums/e219/doggiequeen910/Anime/clannad/renderfornunu.png" /><p>Comment</p></div> You have more control on move float container left and right position than the display: inline-block, as its position is governed by its parent using text-align: Link to comment Share on other sites More sharing options...
davej Posted June 15, 2013 Author Share Posted June 15, 2013 (edited) Yes, it did not occur to me at first that a table was a type of block. I will have to create an experimental page with all of the display options... http://www.w3schools...ass_display.asp This reminds me of a problem I had with a two-column layout. Shouldn't there be a box-type that grabs the full available width and another type that grabs the full available height? Thanks Edited June 15, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now