Je veux demander votre aide pour organiser un bouton au centre d'une image. j'ai le code suivant :
<div class="static1_home1">
<div class="box1">
<div class="img"><img src="/img/cms/Untitled design (20).png" alt="banner" class="img-responsive" /></div>
<div class="text">
<h2>Ceiling Lamp</h2>
<p>Pendant Lights Brisbane</p>
<a class="shop" href="#">Shop Now</a></div>
</div>
<div class="bottom">
<div class="row">
<div class="bos1 col col-lg-7 col-md-7 col-xs-12">
<div class="box-inner">
<a href="#">
<img src="/img/cms/Untitled design (21).png" alt="banner" class="img-responsive" />
</a>
</div>
</div>
<div class="bos2 col col-lg-5 col-md-5 col-xs-12">
<div class="box-inner">
<a href="#">
<img src="/img/cms/_img_cms_Untitled design (21)-png.png" alt="banner" class="img-responsive" /> </a>
</div>
</div>
</div>
</div>
</div>La première image a déjà ce bouton au centre. Comment procéder pour les prochaines images ?
vous pouvez utiliser flexbox pour disposer un bouton au centre d'un lien d' image sur codepen
en html
<div class="static1_home1">
<div class="bottom">
<div class="row">
<div class="bos1 col col-lg-7 col-md-7 col-xs-12">
<a href="#" class="box-inner">
<img src="https://via.placeholder.com/250" alt="banner" class="img-responsive" />
<button>my button</button>
</a>
</div>
</div>
</div>
</div>
en css
.box-inner {
display: flex;
align-items: center;
justify-content: center
}
.box-inner button {
position: absolute;
}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots