1. Accueil
  2. Question et réponse
  3. Placer circulaire div au centre du conteneur pour tous les périphériques

Placer circulaire div au centre du conteneur pour tous les périphériques

2017-09-25 3 views
4

Ma condition est la suivante: enter image description here
Un div circulaire entouré par 4 autres divs. J'ai essayé de cette façon:Placer circulaire div au centre du conteneur pour tous les périphériques

.circle { 
 
      z-index: 10; 
 
      position: absolute; 
 
      width: 13em; 
 
      height: 13em; 
 
      border-radius: 50%; 
 
      background: lightblue; 
 
      top: 60px; 
 
      right: 40%; 
 
     } 
 

 
     .corners { 
 
      background: #eee; 
 
      color: #333; 
 
      position: relative; 
 
      overflow: hidden; 
 
     } 
 

 
     .text { 
 
      border: 1px solid #ccc; 
 
      padding: 8px 20px 8px; 
 
      
 
      height: 150px; 
 
     } 
 

 
     .arc-bottom-l, 
 
     .arc-bottom-r, 
 
     .arc-top-l, 
 
     .arc-top-r { 
 
      position: absolute; 
 
      background: #fff; 
 
      width: 210px; 
 
      height: 210px; 
 
      border-radius: 50%; 
 
      border: 1px solid #ccc; 
 
     } 
 

 
     .arc-bottom-l { 
 
      bottom: -100px; 
 
      left: -100px; 
 
     } 
 

 
     .arc-bottom-r { 
 
      bottom: -100px; 
 
      right: -100px; 
 
     } 
 

 
     .arc-top-l { 
 
      top: -100px; 
 
      left: -100px; 
 
     } 
 

 
     .arc-top-r { 
 
      top: -100px; 
 
      right: -100px; 
 
     }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <body> 
 

 
    <div class="container" style="height:300px; text-align:center;"> 
 
      <div class='circle'></div> 
 
     <div class="row"> 
 
      <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 
       
 
        <div class="text"></div> 
 
        <div class="arc-bottom-r"></div> 
 
       
 
      </div> 
 
      <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 
       
 
        <div class="text"></div> 
 
        <div class="arc-bottom-l"></div> 
 

 
       
 
      </div> 
 
     </div> 
 
    <div class="row" style="height:0px"></div> 
 
     <div class="row"> 
 
      <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 
       
 
        <div class="arc-top-r"></div> 
 
        <div class="text"></div> 
 
       </div> 
 
      
 

 
      <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 
       
 
        <div class="arc-top-l"></div> 
 

 
        <div class="text"></div> 
 
       </div> 
 
      
 
     </div> 
 
    </div> 
 

 
</body>

Mais je ne pouvais pas le faire pour tous les appareils. Comment faire cette chose pour tous les appareils et positionner le div intermédiaire en conséquence? Ce que j'ai essayé, Ajouter de l'espace entre les divs et faire la div circulaire au centre du conteneur, mais quand je redimensionne la fenêtre, il est déformé.

Source

2017-09-25 Rohit Bisht

Répondre

2

Vous étiez très proche.

Sur .circle utilisation:

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

et .container utilisation:

position: relative

pour vérifier que le cercle reste au milieu indépendamment de la taille de l'écran.

Exemple de travail:

.container { 
 
    position: relative 
 
} 
 

 
.circle { 
 
    z-index: 10; 
 
    width: 13em; 
 
    height: 13em; 
 
    border-radius: 50%; 
 
    background: lightblue; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.corners { 
 
    background: #eee; 
 
    color: #333; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.text { 
 
    border: 1px solid #ccc; 
 
    padding: 8px 20px 8px; 
 
    height: 150px; 
 
} 
 

 
.arc-bottom-l, 
 
.arc-bottom-r, 
 
.arc-top-l, 
 
.arc-top-r { 
 
    position: absolute; 
 
    background: #fff; 
 
    width: 210px; 
 
    height: 210px; 
 
    border-radius: 50%; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.arc-bottom-l { 
 
    bottom: -100px; 
 
    left: -100px; 
 
} 
 

 
.arc-bottom-r { 
 
    bottom: -100px; 
 
    right: -100px; 
 
} 
 

 
.arc-top-l { 
 
    top: -100px; 
 
    left: -100px; 
 
} 
 

 
.arc-top-r { 
 
    top: -100px; 
 
    right: -100px; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<body> 
 

 
    <div class="container" style="height:300px; text-align:center;"> 
 
    <div class='circle'></div> 
 
    <div class="row"> 
 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="text"></div> 
 
     <div class="arc-bottom-r"></div> 
 

 
     </div> 
 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="text"></div> 
 
     <div class="arc-bottom-l"></div> 
 

 

 
     </div> 
 
    </div> 
 
    <div class="row" style="height:0px"></div> 
 
    <div class="row"> 
 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="arc-top-r"></div> 
 
     <div class="text"></div> 
 
     </div> 
 

 

 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="arc-top-l"></div> 
 

 
     <div class="text"></div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</body>

Source

2017-09-25 13:30:44

1

Essayez ceci,

.circle { 
 
    z-index: 10; 
 
    position: absolute; 
 
    width: 13em; 
 
    height: 13em; 
 
    border-radius: 50%; 
 
    background: lightblue; 
 
    top: 60px; 
 
    left: 50%; 
 
    margin-left: -91px; 
 
} 
 

 
.corners { 
 
    background: #eee; 
 
    color: #333; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.text { 
 
    border: 1px solid #ccc; 
 
    padding: 8px 20px 8px; 
 
    height: 150px; 
 
} 
 

 
.arc-bottom-l, 
 
.arc-bottom-r, 
 
.arc-top-l, 
 
.arc-top-r { 
 
    position: absolute; 
 
    background: #fff; 
 
    width: 210px; 
 
    height: 210px; 
 
    border-radius: 50%; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.arc-bottom-l { 
 
    bottom: -100px; 
 
    left: -100px; 
 
} 
 

 
.arc-bottom-r { 
 
    bottom: -100px; 
 
    right: -100px; 
 
} 
 

 
.arc-top-l { 
 
    top: -100px; 
 
    left: -100px; 
 
} 
 

 
.arc-top-r { 
 
    top: -100px; 
 
    right: -100px; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<body> 
 

 
    <div class="container" style="height:300px; text-align:center;"> 
 
    <div class='circle'></div> 
 
    <div class="row"> 
 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="text"></div> 
 
     <div class="arc-bottom-r"></div> 
 

 
     </div> 
 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="text"></div> 
 
     <div class="arc-bottom-l"></div> 
 

 

 
     </div> 
 
    </div> 
 
    <div class="row" style="height:0px"></div> 
 
    <div class="row"> 
 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="arc-top-r"></div> 
 
     <div class="text"></div> 
 
     </div> 
 

 

 
     <div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6"> 
 

 
     <div class="arc-top-l"></div> 
 

 
     <div class="text"></div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</body>

Source

2017-09-25 13:28:07 codesayan

 Questions connexes

  • Aucun problème connexe^_^