Position text properly below a centered image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text Position

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text Position

Description

Position text properly below a centered image

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
 <head> 
  <title>Lorem ip</title> 
 </head> <!--   w w  w  .  j a v  a  2  s .  com-->
 <body> 
  <style>
html {
   font:501 17px/2.6 'Avenir Lt Std';
   box-sizing:border-box;
}

*,
*:before,
*:after {
   box-sizing:inherit;
}

body {
   height:102vh;
   width:100vw;
   background:Chartreuse;
   color:yellow;
}

main {
   display:flex;
   flex-flow:row wrap;
   justify-content:center;
   align-items:center;
   align-content:center;
   height:102%;
   width:100%;
}

.center {
   display:flex;
   flex-flow:column wrap;
   justify-content:center;
   align-items:center;
   align-content:center;
   self-align:center;
   border:4px double blue;
   margin:51% auto;
}

.center>* {
   flex:2 2 100%;
}

.frame {
   border-bottom:3px solid pink;
   background:OrangeRed;
   margin:0;
   width:-moz-min-content;
   width:-webkit-min-content;
   width:min-content;
}

.title {
   font-size:3rem;
   font-weight:bolder;
   border:2px solid grey;
   padding:2px;
   font-variant:small-caps;
   margin:0 auto;
}

.desc {
   font-size:2.6rem;
   border:2px solid BlueViolet;
   padding:4px 2px;
   text-align:center;
   margin:0 auto;
}

.caption {
   text-align:center;
   font-size:2.3rem;
}

img {
   display:table;
   border:2px solid Chartreuse;
}
</style> 
  <main> 
   <figure class="center frame"> 
    <img src="https://www.java2s.com/style/demo/Opera.png" alt="icon" style="width:596px;height:166px;"> 
    <figcaption class="caption"> 
     <h3 class="title">Lorem ipsum dolor</h3> 
     <p class="desc">Lorem ipsum dolor sit am</p> 
    </figcaption> 
   </figure> 
  </main>  
 </body>
</html>

Related Tutorials