MobileRead Forums - View Single Post - Universal Solution for Centering Text Under Image

Turtle91 · 05-03-2017, 07:27 PM

try:

Code:

<div class="image"><img alt="" src="../Images/test.jpg" /><span>your caption</span></div>

CSS
div.image      {margin:2em auto; width:80%; text-align:center; page-break-inside:avoid}
div.image span {display:block; font-size:.6em; font-family:serif}
div.image img  {max-width:400px} //* the actual width of your image in pixels *//

See if that works.

edit: You can even try adding the "max-width" to the div.image and set it to the smallest display screen you find convenient (in portrait). Then the image "shouldn't" overflow to the next page.

05-03-2017, 07:27 PM	#7
Turtle91 A Hairy Wizard Posts: 3,360 Karma: 20212223 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	try: Code: <div class="image"><img alt="" src="../Images/test.jpg" /><span>your caption</span></div> CSS div.image {margin:2em auto; width:80%; text-align:center; page-break-inside:avoid} div.image span {display:block; font-size:.6em; font-family:serif} div.image img {max-width:400px} //* the actual width of your image in pixels // See if that works. edit: You can even try adding the "max-width" to the div.image and set it to the smallest display screen you find convenient (in portrait). Then the image "shouldn't" overflow to the next page. Last edited by Turtle91; 05-03-2017 at 07:35 PM.*