Bonjour,

Je ne comprends pas grand chose au HTML et CSS, j'essaye de trouver la solution depuis ce matin en lisant les forums etc.. j'ai du mal à comprendre, pourriez vous m'aider à centrer l'ensemble des élément contenu dans le code ci-dessous svp : 

Je n'ai pas de feuille CSS indépendante tout doit être intégré dans cette même partie, savez-vous comment faire ?

Un grand merci d'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>

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>.

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet :  https://openclassrooms.com/forum/sujet/liquid-html-comment-centrer-verticalement

Liens conseillés

• Règles générales du forum

Je ferme ce sujet.