I have this list layout and now want to make the image align to the center like this how to do this in css? sorry for the bad english, its not my main language edit: please consider the (.)dot as blank space, i dont know how to make a space >.< edit: the source code is at the 6th post
i already try that, however it doesnt centered like i wanted it to be (it centered according to the list)
if you want to center something in other element, the parent element should have two attributes: display:block and some defined width... unless this condition is true, centering with "text-align" (or "margin:0 auto") won't work... try defining the LI element as a block, with some width (...of the column you placed it in) and then you'll see...
li img { display: block; margin: 0 auto; } Code (markup): You can't use {text-align: center;}, because your list items also contain text which is left aligned. cheers, gary
i already done that, but its still not perfectly aligned... "image 1" is more to the right than "image 2" here is the source code : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>the image is not aligned :(</title> <style type="text/css"> #bordered_div { width : 600px; border : 1px solid black; } #bordered_div img { display : block; margin : 0 auto; width : 200px; } </style> </head> <body> <div id="bordered_div"> <ol> <li> some text 1 <ul> <li> some text a <img src="#" alt="image_1"> </li> <li>some text b</li> </ul> </li> <li> some text 2 <img src="#" alt="image_2"> </li> <li>some text 3</li> </ol> </div> </body> </html> Code (markup):
add this to CSS: #bordered_div ol li { display:block; width:600px; } of course change the width according your needs...
what make it different from my source code? #bordered_div img { display : block; margin : 0 auto; width : 200px; } Code (markup): btw i have tried it, and it dont do anything
Aw. This sucks. Lemme show you what's happening, tho in the future what you want to do is give each element a different ugly background colour, because then you can see what's happening easier (I use this all the time!) Yeah the last two posts were telling you different versions of what you already have. That's why they don't make a difference. Both your images ARE centered, but they are centered in their own containers. They are NOT in the same container: the image1 is inside a nested ul, while image2 is inside the main ol. So look: http://stommepoes.nl/centeredimg.png See I outlined each box. The nested ul is indented a bit, meaning the centered image is also indented a bit. So you could remove the margins or padding (remove both since one browser may use padding while another uses margins) on the lists. This means the circle-marked list items will line up fully to the left, but also means the images should line up perfectly. If you still need the text to be indented a bit I think you can put text-indent on the text of the li's: ol ul li { text-indent: whateverpx; } I think this shouldn't be able to touch your images since you've made them blocks. But anyway, do you see now why the images weren't lining up? You can also do this to see the reason: ol { background-color: #f00; } ol ul { background-color: #ff0; } ol img { background-color: #fff; } ol ul img { background-color: #00f; } now you can see that both are centered but their containers aren't the same width.
i know that the image is aligned center with different width, but i don't know how make them aligned the same btw i edited my code as you suggested but it still gave me non aligned image i am starting to think that making this layout is impossible here is the source code now : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>the image is not aligned :(</title> <style type="text/css"> #bordered_div { width : 600px; border : 1px solid black; } #bordered_div img { display : block; margin : 0 auto; width : 200px; } ol ul { /*added css*/ margin: 0; padding: 0; } ol ul li { /*added css*/ text-indent: 35px; } </style> </head> <body> <div id="bordered_div"> <ol> <li> some text 1 <ul> <li> some text a <img src="#" alt="image_1"> </li> <li>some text b</li> </ul> </li> <li> some text 2 <img src="#" alt="image_2"> </li> <li>some text 3</li> </ol> </div> </body> </html> Code (markup):
Changes: <ol> <li>some text 1 <ul> <li><span>some text a</span> <img src="#" alt="image_1"></li> <li><span>some text b</span></li> </ul> </li> <li>some text 2 <img src="#" alt="image_2"></li> <li>some text 3</li> </ol> ================== ol ul li {} ul li span { padding-left: 35px; } Code (markup): cheers, gary
Make sure you at least complete that doctype for the sake of Internet Exlorer. When shortened like that, as in posts #6 and #12, it causes IE, including version 8, to completely ignore 'margin: auto', hence nothing will centre in IE. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [color=blue]"http://www.w3.org/TR/html4/loose.dtd"[/color]> Code (markup):
Hm yeah I like Gary's span better than text-indent on the li text but I didn't want to change the HTML. Also ol ul { /*added css*/ margin: 0; padding: 0; } Code (markup): only applies to uls' inside an ol. I would have removed it from both of them: ol, ul { margin: 0; padding: 0; } that's all ol's and all ul's regardless of who their daddy is. Gary's left-padding on the spans push the visible text back in place, where it was before removing margins and padding so it looks the same.
yay finally with this code i was able to achieve the aligned image however it create another problem... the bullet doesn't appear now and for some reason i am forbidden to use "list-style-position : inside" so how to make the bullet appear inside div? and is there any way we can alter how the lists bullet to also appear indented right? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>the image is not aligned :(</title> <style type="text/css"> #bordered_div { width : 600px; border : 1px solid black; } #bordered_div img { display : block; margin : 0 auto; width : 200px; } ol, ul { margin: 0; padding: 0; } ol ul li {} ul li span { padding-left: 35px; } </style> </head> <body> <div id="bordered_div"> <ol> <li> some text 1 <ul> <li> <span>some text a</span> <img src="#" alt="image_1"> </li> <li><span>some text b</span></li> </ul> </li> <li> some text 2 <img src="#" alt="image_2"> </li> <li>some text 3</li> </ol> </div> </body> </html> Code (markup):
SOLVED thx for all those that help me achieve this effect i am using position relative to affect the image for those that want to know, here is the code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>the image is now aligned :)</title> <style type="text/css"> #bordered_div { width : 600px; border : 1px solid black; } #bordered_div img { display : block; margin : 0 auto; width : 200px; } span{ position:relative; left:-20px; } </style> </head> <body> <div id="bordered_div"> <ol> <li> some text 1 <ul> <li> some text a <span><img src="#" alt="image_1"></span> </li> <li>some text b</li> </ul> </li> <li> some text 2 <img src="#" alt="image_2"> </li> <li>some text 3</li> </ol> </div> </body> </html> Code (markup): i know that this code is still far from good lol, but at least its working its working in FF, IE6 and IE7, just that somehow it doesn't work in Chrome idk why but maybe Chrome doesn't support position relative~