A Pen by ahmad dolatabadi on CodePen.
Created
February 11, 2017 19:15
-
-
Save anonymous/53c2092e98faed38c54d10e11067bf72 to your computer and use it in GitHub Desktop.
Image Figcaption
This file contains hidden or 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 lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title></title> | |
| <link rel="stylesheet" href="Untitled-2.css" type="text/css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="child1"> | |
| <figure class="figure"> | |
| <img class="image1" src="http://uupload.ir/files/qpgj_img1.jpg"> | |
| <figcaption class="figcaption">Fig1.This is a FigCaption.<br>This is a FigCaption.</figcaption> | |
| </figure> | |
| </div> | |
| <div class="child2"></div> | |
| <div class="child3"></div> | |
| <div class="child4"></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| body { | |
| padding: 0; | |
| margin: 0; | |
| border: 0; | |
| list-style-type: none; | |
| } | |
| .container { | |
| background-color: darkkhaki; | |
| display: flex; | |
| height: 400px; | |
| width: 1400px; | |
| justify-content: center; | |
| align-items: center; | |
| margin: auto; | |
| position: relative; | |
| top: 300px; | |
| } | |
| .child1 { | |
| width: 300px; | |
| height: 300px; | |
| background-color: blue; | |
| position: relative; | |
| /*text-align: center;*/ /* for centering the image inside the child1 */ | |
| } | |
| .child2 { | |
| width: 300px; | |
| height: 300px; | |
| background-color: crimson; | |
| } | |
| .child3 { | |
| width: 300px; | |
| height: 300px; | |
| background-color: forestgreen; | |
| } | |
| .child4 { | |
| width: 300px; | |
| height: 300px; | |
| background-color: orange; | |
| } | |
| /*.image1 { | |
| display: block; | |
| margin: auto; | |
| /*position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -70%);*/ | |
| }*/ | |
| .figcaption{ | |
| } | |
| .figure{ | |
| text-align:center; /* for centering the image inside the child1 */ | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to get figcaption aligned to the left or right edge of the image above it ?!