Dev Faq
2
votes

Comment aligner verticalement l'image?

J'ai essayé de jouer avec CSS mais je n'arrive toujours pas à faire les choses correctement.

Ce que j'essaye de faire: entrez la description de l'image ici

Fondamentalement, la zone de contenu est l'image. 

<div class="logo-content-background">
  <div class="logo-content-block">
      <div class="content-description">
        <h3>
        CLIF Bar
        </h3>
        <p>
        CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
        </p>
      </div>
  </div>
</div>
<div class="logo-content-background2">
      <img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" width="300px" height="100px" style="vertical-align:middle; margin:50% 0px" />
</div>
div.logo-content-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #577fa1;
    z-index: 1;
}
div.logo-content-block {
    background: #f3f2f0;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

div.content-description {
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
div.logo-content-background2 {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-color: #f3f2f0;
    z-index: 2;
}

Je pense qu'il y a beaucoup de choses inutiles sur mon code, mais je suis encore nouveau dans le développement frontal. Je voudrais aligner verticalement l'image. Comment puis je faire ça?

0 commentaires

3 Réponses :

2
votes

Vous pouvez y parvenir en utilisant flexbox et supprimer la marge de l' image

<div class="logo-content-background">
  <div class="logo-content-block">
      <div class="content-description">
        <h3>
        CLIF Bar
        </h3>
        <p>
        CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
        </p>
      </div>
  </div>
</div>
<div class="logo-content-background2">
      <img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" width="300px" height="100px" style="vertical-align:middle;" />
</div>
div.logo-content-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #577fa1;
    z-index: 1;
}
div.logo-content-block {
    background: #f3f2f0;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

div.content-description {
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
div.logo-content-background2 {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-color: #f3f2f0;
    z-index: 2;
    display: flex;
    align-items: center;
}

0 commentaires
1
votes

Ajoutez une règle flex au div.logo-content-background2 . Ajoutez un nouveau sélecteur div.logo-content-background2 img et ajoutez-y la règle height: auto , pour que votre image soit proportionnelle. Et supprimez et la balise img (structure html) cette ligne - style = "vertical-align: middle; margin: 50% 0px" . Astuce: si vous voulez que votre image soit centrée horizontalement, ajoutez la règle margin: auto au sélecteur div.logo-content-background2 img ou justify-content: center au div.logo-content-background2 .

En css j'ai versé ce que j'ai ajouté. Je vous ai donné trois solutions (trois extraits): 

<div class="logo-content-background">
  <div class="logo-content-block">
      <div class="content-description">
        <h3>
        CLIF Bar
        </h3>
        <p>
        CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
        </p>
      </div>
  </div>
</div>
<div class="logo-content-background2">
      <img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" width="300px" height="100px"/>
</div>
div.logo-content-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #577fa1;
    z-index: 1;
}
div.logo-content-block {
    background: #f3f2f0;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

div.content-description {
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
div.logo-content-background2 {
    display: flex; /*add this it*/
    align-items: center; /*add this it*/
    
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-color: #f3f2f0;
    z-index: 2;
}

div.logo-content-background2 img {
    width: 80%; /*add this it*/
    height: 60%; /*add this it*/
    object-fit: cover; /*add this it*/
}

La deuxième solution avec le réglage du rapport hauteur / largeur de l'image: 

<div class="logo-content-background">
  <div class="logo-content-block">
      <div class="content-description">
        <h3>
        CLIF Bar
        </h3>
        <p>
        CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
        </p>
      </div>
  </div>
</div>
<div class="logo-content-background2">
      <img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" width="300px" height="100px"/>
</div>
div.logo-content-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #577fa1;
    z-index: 1;
}
div.logo-content-block {
    background: #f3f2f0;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

div.content-description {
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
div.logo-content-background2 {
    display: flex; /*add this it*/
    align-items: center; /*add this it*/
    
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-color: #f3f2f0;
    z-index: 2;
}

div.logo-content-background2 img {
    width: auto; /*add this it*/
    height: auto; /*add this it*/
}

Dans cette solution, votre image est proportionnelle au bloc de gauche. Ajoutez la width: 80% , la height: 60% et l' object-fit: cover règle de object-fit: cover au sélecteur d' div.logo-content-background2 img : 

<div class="logo-content-background">
  <div class="logo-content-block">
      <div class="content-description">
        <h3>
        CLIF Bar
        </h3>
        <p>
        CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a 150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your adventure going.
        </p>
      </div>
  </div>
</div>
<div class="logo-content-background2">
      <img src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" width="300px" height="100px"/>
</div>
div.logo-content-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #577fa1;
    z-index: 1;
}
div.logo-content-block {
    background: #f3f2f0;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

div.content-description {
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
div.logo-content-background2 {
    display: flex; /*add this it*/
    align-items: center; /*add this it*/
    
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-color: #f3f2f0;
    z-index: 2;
}

div.logo-content-background2 img {
    height: auto; /*add this it*/
}

0 commentaires
1
votes

Vous l'avez fait sur le côté gauche. Il suffit de le répéter mais du bon côté!

J'ai copié le code qui est pour le côté gauche et je viens d'ajouter style ="left: 0;" sur element class="logo-content-block" 

<div class="logo-content-background">
    <div class="logo-content-block">
        <div class="content-description">
            <h3>
                CLIF Bar
            </h3>
            <p>
                CLIF BAR® is the first bar we made, and it’s still everything we’re about. Nutritious, sustainable
                ingredients, like organic rolled oats. Performance nutrition. And great taste. Whether you’re on a
                150-mile bike ride or exploring a new trail, it’s the ultimate energy bar™ for keeping your
                adventure going.
            </p>
        </div>
    </div>
</div>
<div class="logo-content-background2">
    <div class="logo-content-block" style="left: 0;">
        <div class="content-description">

        </div>
    </div>
</div>
div.logo-content-background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #577fa1;
    z-index: 1;
}

div.logo-content-block {
    background: #f3f2f0;
    width: 80%;
    height: 60%;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0, -50%);
}

div.content-description {
    padding-left: 50px;
    padding-right: 50px;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

div.logo-content-background2 {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-color: #f3f2f0;
    z-index: 2;
}


div.logo-content-background2 div.logo-content-block {
    background: url('http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
}

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