Comment placer le logo au centre d'une image d'arrière-plan?
Tanvir Rahman
Je voulais placer le logo au centre d'une image d'arrière-plan.J'ai essayé cela en ajoutant une marge.Mais lorsque je redimensionne l'écran en petite taille, cela crée de l'espace supplémentaire.Je pense que ce n'est pas la bonne manière.Veuillez m'aider à résoudre ce problème. problème. 
HTML:
<div class="details-section section">
<div class="container-fluid">
<div class="equal row">
<div class="big-small">
<div class="big col-sm-8">
<img src="images/logo.png" alt="Vintage bike" class="img-responsive center-block"/>
</div>
<div class="small col-sm-4"></div>
</div>
<div class="small-big"></div>
<div class="big-small-big"></div>
</div>
</div>
</div>
CSS:
.details-section .big {
background: url("images/vintage-bike.jpg") no-repeat 0 0 / cover;
}
.details-section .big img {
width: 92px;
margin: 180px auto;
}
ici je mets à jour le violon de travail de ce code.
KZee
Première version:
.details-section .big{
position: relative;
background: #f5f5f5;
}
.details-section .big img{
position: absolute;
display: block;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Deuxième version, il ne fonctionne qu'avec une hauteur de conteneur fixe, mais parfois utile:
.details-section .big{
height: 150px; // Change if need
background: #f5f5f5;
text-align: center;
}
.details-section .big:after{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.details-section .big img{
display: inline-block;
vertical-align: middle;
}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
modifier le
Articles connexes
TOP liste
- 1
Comment exécuter un fichier python avec des droits d'administrateur dans pycharm
- 2
comment obtenir un objet de requête dans les tests unitaires de django?
- 3
mongo kafka connect source
- 4
Vérifier la longueur du nombre à partir du message, puis utiliser la valeur dans l'instruction
- 5
comment convertir une chaîne en un tuple dateutil jour de la semaine sans utiliser eval
- 6
Comment ajouter un texte dans un texte Python/Tkinter
- 7
Aide de variable de débogage pprint jinja2
- 8
Dans les modèles Hugo, comment vérifier la longueur du tableau de fichiers JSON?
- 9
Impression de la longueur du chemin le plus court dans le labyrinthe
- 10
Exécuter la requête externe pour chaque date obtenue à partir de la requête interne
- 11
Recherche de dicton Jinja2 à l'aide d'une clé variable
- 12
Algorithme: diviser de manière optimale une chaîne en 3 sous-chaînes
- 13
Comment obtenir l'intégration contextuelle d'une phrase dans une phrase à l'aide de BERT ?
- 14
définir une propriété pour chaque nœud dans neo4j
- 15
Pourquoi cette requête Java échoue-t-elle? renvoyer 0 quand il y a des résultats
- 16
Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?
- 17
Laravel 8: Attempt to read property "id" on null
- 18
Comment obtenir tous les champs d'un objet (y compris sa superclasse), à l'aide de l'API Mirrors de Dart?
- 19
Référencement des assemblys de structure .net 4.7 dans la solution .net core 2
- 20
Microsoft.WebApplication.targets
- 21
obtenir le nombre de marqueur affiché sur la carte
laisse moi dire quelques mots