the text representing each image located right of image. want text centered underneath corresponding image, how achieve this?
please note applied display: inline-bock on list items, in row.
#footer1 { float: left; width: 100%; border: 10px solid #e3e3e3; } #footer1>ul>li { padding: 0 8px; display: inline-block; } #footer1 a:hover img { border: 1px solid #5cadff; text-decoration: none; box-shadow: 5px 5px 2px 2px #5cadff; } #footer1 img { border: 1px solid transparent; margin-left: 110px; }<div id="footer1"> <h2> sources </h2> <ul> <li> <a href="https://www.wikipedea.com" title="wikipedia"> <img height="50" src="http://www.placehold.it/50" width="50"> </a> w </li> <li> <a href="https://www.google.com" title="google"> <img height="50" src="http://www.placehold.it/50" width="50"> </a> google </li> <li> <a href="https://www.youtube.com" title="youtube"> <img height="50" src="http://www.placehold.it/50" width="50"> </a> youtube </li> <li> <a href="https://www.nlm.nih.gov/" title="nih.gov"> <img height="50" src="http://www.placehold.it/50" width="50"> </a> nih </li> <li> <a href="https://www.medindia.net" title="medindia.net"> <img height="50" src="http://www.placehold.it/50" width="50"> </a> medindia </li> </ul> </div>
i able without changes existing html doing this:
li{ display:inline-block; text-align:center; width:70px; } li img{ margin:0 10px; } the text-align centers text , child elements inside li. width needs large enough no caption large fit in width. (if caption won't fit in allotted width, centering wrecked.)
i added left , right margin image little bit of future-proofing in case later want include short caption in list. margin, short caption forced next line (instead of next image) since 50 px image width + 10 margin on each side leaves no room text.
Comments
Post a Comment