Bonjour, je suis un débutant complet et je ne comprends pas grand chose au langage HTML / liquid / CSS 

Je voulais savoir comment centrer verticalement l'ensemble des éléments suivants que J'ai mis en place sur mon site : (car pour l'instant tout s'affiche à gauche sur ma page web)

Un grand merci par avance !

<div class="col-xs-12 col-sm-6 col-md-4">

  <div data-course-id="627680" data-course-url="/p/campagnes-youtube-adwords" ,="" class="course-listing">

    <div class="row">

      <a href="/p/campagnes-youtube-adwords" data-role="course-box-link">

        <div class="col-lg-12">

          <!-- Course Image, Name & Subtitle (everyone) -->

          <div class="course-box-image-container">

            <img class="course-box-image" src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:705/https://www.filepicker.io/api/file/qDIjEhETyKNq4nOrwJz3" role="presentation">

          </div>

          <div class="course-listing-title">

            Les campagnes Youtube

          </div>

          <!-- Progress bar (enrolled users) -->

          <div class="col-xs-12 hidden">

            <div class="progressbar">

              <div class="progressbar-fill"></div>

            </div>

          </div>

          <!-- Subtitle (unenrolled users) -->

          <div class="course-listing-subtitle">

            Créer votre pub Youtube sur Google adwords (Google Ads)

          </div>

        </div>

      </a>

    </div>

    <div class="course-listing-extra-info col-xs-12">

      <div class="pull-left">

        <!-- Bundle Info (everyone) -->

        <!-- Author Image and Name (everyone) -->

        <img align="left" class="img-circle" src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:30,height:30/https://www.filepicker.io/api/file/SarnyGfbR4WvwQxoqJP4" alt="Davy Martial">

        <div class="small course-author-name">

          Davy Martial

        </div>

      </div>

      <!-- Progress percentage (enrolled users) -->

      <div class="pull-right hidden">

        <div class="small course-progress">

          <span class="percentage" data-course-id="627680">

            %

          </span>

          <br>

          Completé

        </div>

      </div>

      <!-- Price (unenrolled users) -->

      <div class="pull-right">

        <div class="small course-price" id="course-box-price-product-1277733">

          €29

        </div>

      </div>

    </div>

  </div>

</div>

</div>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

<Br>

-
Edité par blakeW 15 septembre 2019 à 13:16:21

Salut,

tu devrais pouvoir te débrouiller avec ce lien :

https://www.web4college.com/questions/methods-for-vertical-centering.php

Mais tu dis que tout est à gauche, c'est pas plutôt horizontalement ?
Dans ce cas il suffit d'englober tout ton site dans une div et de lui appliquer un max-width et un margin: auto.

Salut

En fait, le langage html est très permissif concernant la casse. J'ai fait un test, en mélangeant lettres capitales et minuscules, ça affiche la page. Mais, par convention, mieux vaut éviter.

okey je me disais bien aussi. à mes début aussi j'avais tendance à faire cette erreur : </br> lol.

Mais comme dit. mieux vos se normaliser. 

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.