Forked from anonymous/Text Align with Image Border
Last active
August 29, 2015 14:27
-
-
Save caraya/dde3e3e91c7199e1d6a3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <style type='text/css'> | |
| /* | |
| We can leave the figcaption without doing anything to its width :) | |
| */ | |
| p.caption { | |
| font-family: "ArnoPro-Caption"; | |
| font-size: .6em; | |
| text-align: left; | |
| margin-top: .3em; | |
| margin-bottom: 1em; | |
| } | |
| /* | |
| had a typo... the selector should be figure.wrap_small, not fig.wrap_small | |
| */ | |
| .wrap_small { | |
| text-align: center; | |
| margin: 0.6em 0; | |
| /* | |
| makes sure that the maximum width of the figure is only as wide as the content, | |
| or figcaption in this case | |
| */ | |
| max-width: min-content; | |
| } | |
| img{ | |
| border: 1px solid red; | |
| /* | |
| the image inherits the max-width of the parent figure element | |
| */ | |
| max-width: inherit; | |
| width: 50%; | |
| height: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap_small"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/dunetocat.png" alt="dunetocat"/> | |
| <p class='caption'>Joe Fig, <em>Jackson Pollock 1950 # 1</em>, 2002. C-print, 30 x 40 inches</p> | |
| </div> | |
| </body> | |
| <html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment