项目作者: sureshalagarsamy

项目描述 :
Div inside div horizontal
高级语言: HTML
项目地址: git://github.com/sureshalagarsamy/html-div-inside-div-horizontal.git


Div inside div horizontally center

Example-1

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Div inside div center</title>
  6. <link rel="Stylesheet" type="text/css" href="style.css">
  7. </head>
  8. <body>
  9. <div class="parent">
  10. <div class="child">test</div>
  11. </div>
  12. </body>
  13. </html>

CSS

  1. .parent {
  2. width : 200px;
  3. height: 200px;
  4. border: 1px solid #DDD;
  5. }
  6. .child {
  7. width : 50px;
  8. height: 50px;
  9. border: 1px solid #DDD;
  10. margin: 0 auto;
  11. text-align:center;
  12. background-color: #F6F6F6;
  13. }

Output

ScreenShot

Example-2

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>Div inside div center</title>
  7. </head>
  8. <body>
  9. <div class="flex-container">
  10. <div class="item">item 1</div>
  11. </div>
  12. </body>
  13. </html>

CSS

  1. .flex-container {
  2. display: -webkit-flex;
  3. display: flex;
  4. -webkit-justify-content: center;
  5. justify-content: center;
  6. width: 200px;
  7. height: 100px;
  8. background-color: #F6F6F6;
  9. border: 1px solid #BBB;
  10. border-radius: 6px;
  11. box-shadow: 0 0 9px #BBB;
  12. }
  13. .item {
  14. background-color: #DDD;
  15. text-align:center;
  16. width: 50px;
  17. height: 50px;
  18. margin: 10px;
  19. border-radius: 3px;
  20. border: 1px solid #BBB;
  21. }

Output

ScreenShot

Note

These 2 properties only used make inner div as center.. other properties will be used for cosmetic effects only.

  1. display: flex;
  2. justify-content: center;