Comment centrer tout le contenu d'un div et garder la même distance entre eux
marijn
J'essaie de trouver un moyen de faciliter le centrage du contenu et de rendre la distance entre tout identique si l'écran devient plus petit. Si l'écran devient moins haut, le contenu doit se rapprocher, mais entre chaque div doit être de la même distance.
HTML
<div id="our_culture"class="explor_us">
<div class="colums">
<div class="colum1" id="pic1">
<div class="wilpe_logo">
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
</div>
<div class="text_holder">
<p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
<div class="button_two">
<a class="button_text" href="#">Explore</a>
</div>
</div>
</div>
<div class="colum1" id="pic1">
<div class="wilpe_logo">
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
</div>
<div class="text_holder">
<p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
<div class="button_two">
<a class="button_text" href="#">Explore</a>
</div>
</div>
</div>
<div class="colum1" id="pic1">
<div class="wilpe_logo">
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
</div>
<div class="text_holder">
<p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
<div class="button_two">
<a class="button_text" href="/wilpe_import.html">Explore</a>
</div>
</div>
</div>
<div class="colum2" id="pic1">
<div class="wilpe_logo">
<a href="wilpetrade.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
</div>
<div class="text_holder">
<p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
<div class="button_two">
<a class="button_text" href="/wilpetrade.html">Explore</a>
</div>
</div>
</div>
<div class="colum2"id="pic1">
<div class="wilpe_logo">
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/SVG_logo.svg/2000px-SVG_logo.svg.png" width="150px" height="100px" alt="" /></a>
</div>
<div class="text_holder">
<p> Wilpe is an investment group specialized in supporting and developing growing businesses and brands. Wilpe believes in knowledge.
<div class="button_two">
<a class="button_text" href="/wilpe_deal.html">Explore</a>
</div>
</div>
</div>
</div>
<div class="photo_overlay_filter6"></div>
</div>
CSS
.colum1{
margin-top: -20px;
width: 20%;
height: 55vh;
float: right;
}
.colum2{
margin-top: -20px;
width: 20%;
height: 55vh;
float: right;
}
.text_holder{
color: white;
padding: 0px;
text-align: center;
font-size: 16px;
width: 80%;
margin: auto;
margin-top: 18%;
z-index: 83;
position: relative;
}
.wilpe_logo{
width: 150px;
height: 100px;
margin: auto;
margin-top: 20px;
z-index: 83;
position: relative;
}
#pic1{
background-image:url(http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg);
background-size: cover;
background-position: center;
}
DreamTeK
Cela peut maintenant être accompli avec flexbox. Ce problème est exactement ce pour quoi le modèle flex a été conçu.
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.FlexBox{
display:flex;
width:100%;
height:100%;
}
.FlexItem{
width:100%;
background:#b00;
border:5px solid #ddd;
flex:1;
}<div class="FlexBox">
<div class="FlexItem">1</div>
<div class="FlexItem">2</div>
<div class="FlexItem">3</div>
<div class="FlexItem">4</div>
<div class="FlexItem">5</div>
</div>Pour ajuster l'espace entre les éléments, réglez simplement la largeur de chaque élément à la valeur souhaitée, dans ce cas, il y a 5 éléments, donc je veux que chacun soit 15%. (donc la largeur totale est inférieure à 100%).
Définissez ensuite la justify-contentpropriété du conteneur flex sur spacce-aroundou sur space-between.
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.FlexBox{
display:flex;
width:100%;
height:100%;
justify-content:space-around; /*(space-between creates equal space with items left aligned)*/
}
.FlexItem{
width:15%; /* (total items less than 100%) */
background:#b00;
border:5px solid #ddd;
}<div class="FlexBox">
<div class="FlexItem">1</div>
<div class="FlexItem">2</div>
<div class="FlexItem">3</div>
<div class="FlexItem">4</div>
<div class="FlexItem">5</div>
</div>Support
Flex est désormais pris en charge dans tous les principaux navigateurs.
(Certaines configurations peuvent être boguées, mais quoi de neuf? Il suffit de tester avant utilisation.)