Dev Faq
1
votes

Je n'arrive pas à aligner mon icône fa à gauche sur mon titre h3

J'ai essayé quelques astuces que j'ai trouvées en ligne ici, mais je ne peux pas l'aligner sans perdre ma mise en forme, ma taille, ma couleur de position. etc. Je veux que tout le texte et les images soient centrés. Je ne peux pas comprendre.

Voici mon code et CSS actuels:

FILETAGE DE TUYAU Quand il s'agit de filetage de tuyaux, nous sommes là pour vous. Nous utilisons la meilleure technologie pour assurer un filetage précis et précis.

voici mon css 

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>

  <div class="demo">
    <div class="container">
      <div class="row">

        <div class="col-md-4 col-sm-6">
          <div class="serviceBox">
            <div class="service-icon"><i class="icon fa fa-check-square-o" aria-hidden="true"></i></div>
            <h3 class="title">PIPE THREADING</h3>
            <p class="description">When it comes to pipe threading we have your back. We use the best technology to ensure accurate and precise threading.</p>
            <img class="rounded mx-auto d-block" src="wp-content/uploads/2019/03/pipethreading.jpg" alt="..." />
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
.demo {
  padding: 100px 0;
}

.heading-title {
  margin-bottom: 100px;
}

.serviceBox {
  padding: 30px 30px 30px 90px;
  background: #f8f8f8;
  color: #333;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover {
  background: #645e9d;
  color: #fff;
}

.serviceBox:after {
  content: "";
  display: block;
  border-top: 500px solid #fff;
  border-left: 500px solid transparent;
  margin-top: -55%;
  margin-left: 100%;
  opacity: 0;
  position: absolute;
  transform: scale(2);
  transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover:after {
  margin-left: 0;
  opacity: 0.1;
}

.serviceBox .service-icon {
  font-size: 50px;
  color: #645e9d;
  position: absolute;
  top: 40px;
  left: 20px;
  transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover .service-icon {
  color: #fff;
}

.serviceBox .title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-transform: capitalize;
}

.serviceBox .description {
  font-size: 15px;
  color: #a3a3a3;
  line-height: 25px;
  margin: 0;
  transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover .description {
  color: #fff;
}

@media only screen and (max-width: 990px) {
  .serviceBox {
    margin-bottom: 15px;
  }
}

2 commentaires

Centré verticalement, centré horizontalement ou les deux?

Centré horizontalement

3 Réponses :

0
votes

Vous pouvez inclure le titre h3 dans le div fa. A titre d'exemple: https://jsfiddle.net/quyovr9a/ 

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>

<div class="demo">
<div class="container">
<div class="row">

<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon"><i class="icon fa fa-check-square-o" aria-hidden="true"></i> <h3 class="title">PIPE THREADING</h3></div>
<p class="description">When it comes to pipe threading we have your back. We use the best technology to ensure accurate and precise threading.</p>
<img class="rounded_mx-auto_d-block" src="wp-content/uploads/2019/03/pipethreading.jpg" alt="..." />
</div>
</div>
</div>
</div>
</div>

</body>
</html>
.demo
{
	padding: 100px 0;
}

.title {
	display: inline-block;
}

.description {
	padding-top: 90px;
}

.heading-title
{
	margin-bottom: 100px;
}
.serviceBox{
    padding: 30px 30px 30px 90px;
    background: #f8f8f8;
    color: #333;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover{
    background: #645e9d;
    color: #fff;
}

.serviceBox:after{
    content: "";
    display: block;
    border-top: 500px solid #fff;
    border-left: 500px solid transparent;
    margin-top: -55%;
    margin-left: 100%;
    opacity: 0;
    position: absolute;
    transform: scale(2);
    transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover:after{
    margin-left: 0;
    opacity: 0.1;
}

.serviceBox .service-icon{
    font-size: 50px;
    color: #645e9d;
    position: absolute;
    top: 40px;
    left: 20px;
    transition:all 0.3s ease-in-out 0s;
}

.serviceBox:hover .service-icon{
    color: #fff;
}

.serviceBox .title{
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    text-transform: capitalize;
}

.serviceBox .description {
    font-size: 15px;
    color: #a3a3a3;
    line-height: 25px;
    margin: 0;
    margin-left: -8px;
    transition: all 0.3s ease-in-out 0s;
}

.serviceBox .rounded_mx-auto_d-block {
    margin-left: -6px;
}

.serviceBox:hover .description{
    color: #fff;
}

@media only screen and (max-width: 990px){
    .serviceBox{ margin-bottom: 15px; }
}

6 commentaires

Salut J'ai essayé de l'ajouter dans la balise div. ça ne marche pas pour moi.

Hmm ... Si vous exécutez l'extrait de code sous ma réponse, cela semble fonctionner. Est-ce ce que tu veux réaliser?

c'est ce que je veux réaliser mais pour une raison quelconque, cela ne fonctionne pas lorsque je l'implémente

Difficile de dire ce qui ne va pas car je ne connais pas le code complet. Le violon à ma réponse donne le même résultat que l'extrait de code, donc cela devrait "fonctionner" en principe.

Merci. Cela fonctionne dans le violon et en principe c'est la bonne réponse. Je crois qu'il y a un problème de CSS avec le thème. Merci encore pour l'aide Comme il s'agissait d'un problème sur les petits écrans, j'ai choisi de masquer entièrement l'icône sur les petits écrans. Merci encore.

: o) heureux de vous aider!

1
votes

Ajout d'une classe col-center qui peut être appliquée à votre colonne pour centrer correctement la boîte. 

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>

<div class="demo">
<div class="container">
<div class="row">

<div class="col-md-4 col-sm-6 col-center">
<div class="serviceBox">
<div class="service-icon"><i class="icon fa fa-check-square-o" aria-hidden="true"></i></div>
<h3 class="title">PIPE THREADING</h3>
<p class="description">When it comes to pipe threading we have your back. We use the best technology to ensure accurate and precise threading.</p>
<img class="rounded mx-auto d-block" src="wp-content/uploads/2019/03/pipethreading.jpg" alt="..." />
</div>
</div>
</div>
</div>
</div>

</body>
</html>

.demo
{
	padding: 100px 0;
}
.heading-title
{
	margin-bottom: 100px;
}
.serviceBox{
    padding: 30px 30px 30px 90px;
    background: #f8f8f8;
    color: #333;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover{
    background: #645e9d;
    color: #fff;
}

.serviceBox:after{
    content: "";
    display: block;
    border-top: 500px solid #fff;
    border-left: 500px solid transparent;
    margin-top: -55%;
    margin-left: 100%;
    opacity: 0;
    position: absolute;
    transform: scale(2);
    transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover:after{
    margin-left: 0;
    opacity: 0.1;
}

.serviceBox .service-icon{
    font-size: 50px;
    color: #645e9d;
    position: absolute;
    top: 40px;
    left: 20px;
    transition:all 0.3s ease-in-out 0s;
}

.serviceBox:hover .service-icon{
    color: #fff;
}

.serviceBox .title{
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    text-transform: capitalize;
}

.serviceBox .description{
    font-size: 15px;
    color: #a3a3a3;
    line-height: 25px;
    margin: 0;
    transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover .description{
    color: #fff;
}

@media only screen and (max-width: 990px){
    .serviceBox{ margin-bottom: 15px; }
}


.col-center {
  float: none !important;
  margin: auto;
}
.col-center {
  float: none !important;
  margin: auto;
}

0 commentaires
0
votes

Vous pouvez utiliser flexbox pour y parvenir.

Vous devez faire un enroulement, supprimer votre positionnement sur l'icône, changer la direction de flex sur la colonne de droite, etc ... 

.serviceBox {
  display:flex;
}


.box-left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.box-right {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
    flex: 3;
}

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor