Comment faire pour centrer sur l'HTML5?

J'ai donc ce code ici Qui est l'plans je ferai le point sur mon site, mais j'ai commenté l'un des plans et maintenant je suis à la recherche pour n'afficher que les 3 plans, alors comment aurais-je centre tous les 3 d'entre eux comme vous pouvez le voir sur la photo, il y a plus de gauche?

Comment faire pour centrer sur l'HTML5?

              <!-- Row fuid-->
              <div class="row">
                  <!-- Item table -->
                  <div class="col-sm-6 col-md-4 col-lg-3">
                      <div class="item_table">
                          <div class="head_table">
                              <h1>FREE</h1>
                              <h2>£ 0.00  <span>/Mo</span></h2>
                          </div>
                          <ul>  
                              <li class="color">2 GB HDD</li>
                              <li>25GB Bandwidth</li>
                              <li class="color">1 E-mail Account</li>
                              <li>1 Sub Domains</li>
                              <li class="color">cPanel/Site Creator</li>
                              <li>1 FTP Account</li>
                              <li class="color">1 Cron Job</li>
                              <li>1 Addon Domain</li>
                              <li class="color">1 Parked Domain</li>
                          </ul> 
                          <a href="signup.html" class="button">Order Now</a>
                      </div>
                  </div>
                  <!-- End Item table -->

                  <!-- Item table -->
                  <div class="col-sm-6 col-md-4 col-lg-3">
                      <div class="item_table">
                          <div class="head_table">
                              <h1>PREMIUM</h1>
                              <h2>£ 0.99  <span>/Mo</span></h2>
                          </div>
                          <ul>  
                              <li class="color">30 GB HDD</li>
                              <li>1000GB Bandwidth</li>
                              <li class="color">1024MB RAM</li>
                              <li>2 Dedicated IP Addresses</li>
                              <li class="color">cPanel/WHM Included</li>
                              <li>Open VZ Included</li>
                          </ul> 
                          <a href="signup.html" class="button">Order Now</a>
                      </div>
                  </div>
                  <!-- End Item table -->

                  <!-- Item table -->
                  <!--<div class="col-sm-6 col-md-4 col-lg-3">
                      <div class="item_table">
                          <div class="head_table">
                              <h1>V.I.P</h1>
                              <h2>£ 2.00  <span>/Mo</span></h2>
                              <!--<h5>Or  $ 150.5 Yearly!</h5>
                          </div>
                          <ul>  
                              <li class="color">30 GB HDD</li>
                              <li>1000GB Bandwidth</li>
                              <li class="color">1024MB RAM</li>
                              <li>2 Dedicated IP Addresses</li>
                              <li class="color">cPanel/WHM Included</li>
                              <li>Open VZ Included</li>
                          </ul> 
                          <a href="www.clearhostsolutions.com/signup.html" class="button">Order Now</a>
                      </div>
                  </div>-->
                  <!-- End Item table -->
Votre exemple de code semble que c'est incomplet, il n'y a pas de fin div pour le <div class=ligne>
Les gens sont de donner HTML5/CSS réponses, mais je pense que vous vous demandez comment faire cela avec le bootstrap de classes. droit?

OriginalL'auteur ClearHost | 2014-07-31

  1. 2

    Je pense qu'il y a deux réponses...

    css a text-align: center et avec bootstrap est de 12 colonnes de mise en page, vous devez donner à chaque colonne 4 de chaque, j'ai utilisé le col-sm-4, depuis jsfiddle de la fenêtre est petite.

    voici mon exemple. http://jsfiddle.net/N7mvN/ assurez-vous pour tirer la fenêtre d'affichage de l'ouvrir plus largement à la voir.

    voici le code html 

    <!-- Row fuid-->
<div>
<div class="row" style="margin:0 auto">
<!-- Item table -->
<div class="col-sm-4">
<div class="item_table" style="background-color:red">
<div class="head_table">
<h1>FREE</h1>
<h2>£ 0.00  <span>/Mo</span></h2>
</div>
<ul>  
<li class="color">2 GB HDD</li>
<li>25GB Bandwidth</li>
<li class="color">1 E-mail Account</li>
<li>1 Sub Domains</li>
<li class="color">cPanel/Site Creator</li>
<li>1 FTP Account</li>
<li class="color">1 Cron Job</li>
<li>1 Addon Domain</li>
<li class="color">1 Parked Domain</li>
</ul> 
<a href="signup.html" class="button">Order Now</a>
</div>
</div>
<!-- End Item table -->
<!-- Item table -->
<div class="col-sm-4">
<div class="item_table" style="background-color:green">
<div class="head_table">
<h1>PREMIUM</h1>
<h2>£ 0.99  <span>/Mo</span></h2>
</div>
<ul>  
<li class="color">30 GB HDD</li>
<li>1000GB Bandwidth</li>
<li class="color">1024MB RAM</li>
<li>2 Dedicated IP Addresses</li>
<li class="color">cPanel/WHM Included</li>
<li>Open VZ Included</li>
</ul> 
<a href="signup.html" class="button">Order Now</a>
</div>
</div>
<!-- End Item table -->
<!-- Item table -->
<div class="col-sm-4">
<div class="item_table" style="background-color:blue">
<div class="head_table">
<h1>V.I.P</h1>
<h2>£ 2.00  <span>/Mo</span></h2>
<h5>Or  $ 150.5 Yearly!</h5>
</div>
<ul>  
<li class="color">30 GB HDD</li>
<li>1000GB Bandwidth</li>
<li class="color">1024MB RAM</li>
<li>2 Dedicated IP Addresses</li>
<li class="color">cPanel/WHM Included</li>
<li>Open VZ Included</li>
</ul> 
<a href="www.clearhostsolutions.com/signup.html" class="button">Order Now</a>
</div>
</div>
<!-- End Item table -->
</div>
</div>

    et un supplément de css

    .item_table {
margin:1.5em;
padding:1em;
text-align:center;
}
    Bonjour cela a fonctionné, petite question comment pourrais-je le récupérer à la mise en page que j'avais? c'est à dire la couleur??
    Dans le html, j'ai ajouté un peu de style pour les éléments de la liste. Enlever les pièces qui disent couleur d'arrière-plan

    OriginalL'auteur Zombiesplat

  2. 1

    Vous pouvez toujours utiliser <div align="center">stuff here</div> et il fonctionnera tout simplement si vous voulez l'contenant des éléments à ne pas le contenu du centre sur eux-dire <tag style="text-align:left;">...</tag>

    Une autre façon est à l'intérieur de votre CSS fichier le code suivant:

    * { margin:0px auto; }
div.container { width:1000px; border:1px solid black; }

    La * s'applique à l'ensemble de la page et met en place une page centrée.
    Ensuite, vous devez utiliser un autre tag div avec une largeur définie pour profiter de la propriété.

    Dans votre HTML fichier:

    <div class="container">...</div>

    OriginalL'auteur Khaltazar

  3. 0

    Envelopper le tout dans une div avec l'attribut style défini à margin: 0px auto; width: 1000px; où 1000px est la largeur des éléments contenus. c'est à dire. auront besoin d'être changé, étant donné que je ne connais pas la largeur de vos éléments.

    OriginalL'auteur ShaneQful

  4. -1

    html:

    <div class="container">
<div class="third inline"><!-- content --></div>
<div class="third inline"><!-- content --></div>
<div class="third inline"><!-- content --></div>
</div>

    css

    .third{
width:30%;
margin:0;}
.inline{
display:inline-block;}
.container{
width:50%;/*whatever*/
margin:0 auto;}

    OriginalL'auteur siabaJS