SHARE
TWEET

Flexbox Demo

a guest Jun 26th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div style="display:flex; text-align: center;">
  2.     <div style="width:100%">
  3.         <img src="https://via.placeholder.com/150x150">
  4.         <h2>Title</h2>
  5.         <p style="margin-left:2.5em; margin-right:2.5em;">
  6.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula erat ut facilisis ullamcorper.
  7.         </p>
  8.     </div>
  9.     <div style="width:100%">
  10.         <img src="https://via.placeholder.com/150x150">
  11.         <h2>Title</h2>
  12.         <p style="margin-left:2.5em; margin-right:2.5em;">
  13.             Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce vel dignissim elit. Vestibulum venenatis pharetra ipsum. Ut vitae ultrices justo. Ut vitae dui dui.
  14.         </p>
  15.     </div>
  16.     <div style="width:100%">
  17.         <img src="https://via.placeholder.com/150x150">
  18.         <h2>Title</h2>
  19.         <p style="margin-left:2.5em; margin-right:2.5em;">
  20.             Pellentesque vitae dolor et elit euismod scelerisque sit amet quis diam. Nam lacinia urna ut pulvinar vehicula. Maecenas eu lorem ac risus rhoncus ultricies. Maecenas fringilla porttitor metus dignissim vestibulum. Donec bibendum tellus at tellus hendrerit, in ultrices lectus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  21.         </p>
  22.     </div>
  23. </div>
  24. <div style="display:flex; text-align: center;">
  25.     <div style="width:100%">
  26.         <img src="https://via.placeholder.com/150x150">
  27.         <h2>Title</h2>
  28.         <p style="margin-left:2.5em; margin-right:2.5em;">
  29.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula erat ut facilisis ullamcorper.
  30.         </p>
  31.     </div>
  32.     <div style="width:100%">
  33.         <img src="https://via.placeholder.com/150x150">
  34.         <h2>Title</h2>
  35.         <p style="margin-left:2.5em; margin-right:2.5em;">
  36.             Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce vel dignissim elit. Vestibulum venenatis pharetra ipsum. Ut vitae ultrices justo. Ut vitae dui dui.
  37.         </p>
  38.     </div>
  39.     <div style="width:100%">
  40.         <img src="https://via.placeholder.com/150x150">
  41.         <h2>Title</h2>
  42.         <p style="margin-left:2.5em; margin-right:2.5em;">
  43.             Pellentesque vitae dolor et elit euismod scelerisque sit amet quis diam. Nam lacinia urna ut pulvinar vehicula. Maecenas eu lorem ac risus rhoncus ultricies. Maecenas fringilla porttitor metus dignissim vestibulum. Donec bibendum tellus at tellus hendrerit, in ultrices lectus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  44.         </p>
  45.     </div>
  46. </div>
  47. <div style="display:flex; text-align: center;">
  48.     <div style="width:100%">
  49.         <img src="https://via.placeholder.com/150x150">
  50.         <h2>Title</h2>
  51.         <p style="margin-left:2.5em; margin-right:2.5em;">
  52.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula erat ut facilisis ullamcorper.
  53.         </p>
  54.     </div>
  55.     <div style="width:100%">
  56.         <img src="https://via.placeholder.com/150x150">
  57.         <h2>Title</h2>
  58.         <p style="margin-left:2.5em; margin-right:2.5em;">
  59.             Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce vel dignissim elit. Vestibulum venenatis pharetra ipsum. Ut vitae ultrices justo. Ut vitae dui dui.
  60.         </p>
  61.     </div>
  62.     <div style="width:100%">
  63.         <img src="https://via.placeholder.com/150x150">
  64.         <h2>Title</h2>
  65.         <p style="margin-left:2.5em; margin-right:2.5em;">
  66.             Pellentesque vitae dolor et elit euismod scelerisque sit amet quis diam. Nam lacinia urna ut pulvinar vehicula. Maecenas eu lorem ac risus rhoncus ultricies. Maecenas fringilla porttitor metus dignissim vestibulum. Donec bibendum tellus at tellus hendrerit, in ultrices lectus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  67.         </p>
  68.     </div>
  69. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top