October 29, 200916 yr Hi Everyone, I've bumped into a small snag. I have an image (an icon) that has a textual description that needs to be displayed centered and beneath the image like shown in the attached Test1.png. I am currently using this: <div style="position:absolute; text-align:center; z-index:1; top:50px; left:50px"> <image src="someimage.png" /> <p>Icon Text</p> </div> This works but the as you can see I rely on absolute positioning and because the image and the text are inside the same div, the div expands to fit the text and moves the icon so that its top-left corner is no longer at 50,50. What I basically need to do is keep the image at 50,50 and have the text appear centered but placed at the bottom of icon image Any help will be greatly appreciated, I've tried all sorts of combinations and cannot seem to figure one out that works Mat
October 29, 200916 yr Hi, I'm not sure I understand you correctly, but if you put the icon text into a <p> then you can style both <p> and <img> with text-align:center; Because the <p> is a block element it will always display below the icon (you can use display:inline; to override this). ... <style> #iconimgContainer {position:absolute;top:50px;left:50px;} /* this just places the container somewhere on the page, add width and height if needed */ #iconimgContainer img {text-align:center;} #iconimgContainer p {text-align:center;} </style> </head> <body> <div id="iconimgContainer"> <img src="someimage.png" alt="" /> <p>Icon Text</p> </div><!-- #iconimgContainer --> ...
October 29, 200916 yr Author Sorry I forgot to add the page tags. What you describe still causes the image to move so that it is no longer at position 50,50> I basically want the image to remain at exactly position 50,50 on screen whilst the text aligns itself to the bottom of the image and centered on the horizontal.
October 29, 200916 yr This is one solution; I expect there are lots of other ways and it could possibly be simplified:- CSS #iconimgContainer { width: 400px; height: 150px; background: pink;} /* this just places the container somewhere on the page*/ #iconimgContainer img { display: block; width: 90px; margin: auto; } #iconimgContainer p { text-align:center; } Markup:- <div id="iconimgContainer"> <img src="images/orangew90x90.jpg" alt="" /> <p>Icon Text</p> </div><!-- #iconimgContainer --> I've used a 400*150px containing div colored pink just to see its size; then a 90*90px image which is centered in the div and the text in the p tag is centered underneath.
October 29, 200916 yr Author unfortunately that wont work for me. I've attached a diagram that shows whats happening: Figure 1 - This is the image inside the div before text is added. Note that it is in the correct place Figure 2 - This is the image with the text added to the div, as you can see the image has been moved so that it is centered in the div (not what I want) Figure 3 - This is what I actually need. I need the image to absolutely remain where I position it and not move, I then need the text to display directly under the image but center justified on the horizontal I could very easily accomplish this if I had static image icon sizes, but ufortunately I wont have this information so I cannot use any kind of static sizing
October 29, 200916 yr I've just tested my styles without the width for the image and it still works:- #iconimgContainer2 { width: 400px; height: 200px; background: pink;} /* this just makes the container show somewhere on the page*/ #iconimgContainer2 img { display: block; margin: auto; } #iconimgContainer2 p { text-align:center; } <div id="iconimgContainer2"> <img src="images/orange100x131.jpg" alt="" /> <p>Icon Text</p> </div><!-- #iconimgContainer2 --> This works too because the image and text are in separate p tags which have text-align: center for the text and image:- #iconimgContainer3 { width: 400px; height: 200px; background: pink;} /* this just places the container somewhere on the page*/ #iconimgContainer3 p { text-align:center; } <div id="iconimgContainer3"> <p><img src="images/orange100x131.jpg" alt="" /></p> <p>Icon Text; lots of text;</p> </div><!-- #iconimgContainer3 -->
October 29, 200916 yr Author Hi Wickham, Thanks for the suggestion but if you set the position of the div to absolute and remove the width and height information from the div then you will find that it does not work as I explained in my previous examples. The position of the image is moved so that it is centered inside the div and no longer appears at 50,50 Mat
October 30, 200916 yr Sorry, I have been giving you codes to center the image and text when you don't want the image centered. However, if you want the image 50px from the top and 50px from the left of a container, the text underneath will also have only 50px on the left of the image above before it meets the side of the container so wide text will be 50px on the left of the image and much more on the right. If you want to center a lot of text under the image it will need to be more than 50px both sides of the image above. If the image starts 50px from the left of the container and you have a lot of text underneath to center under it, the text will have to expand out of the container on the left; which could be done with a separate container for the text with different top and left positions. Item 5 at the bottom of this link seems to be what you are describing http://www.wickham43.com/forumposts/sharetops091029-2.html The top left item is your original code where the image moves according to the width of text. I think we need to see the whole page online with the image to work out what you want, how wide is the container for the image and text?.
October 30, 200916 yr Well I might be being a tit here (nothing new!) but why use an image element at all? It seems to me to be far simpler to centre the text in the container and then set the container's background to the image via CSS?
Create an account or sign in to comment