28112 sujets

CSS et mise en forme, CSS3

Centrer ul dans un div

Bonjour,

Vous pouvez toujours essayer de lui donner une largeur fixe (inférieur à celle du div parent) et le center avec margin: 0 auto mais je fais que deviner.
Administrateur
Hello manjava,

Tu n'appliques pas toutes les recommandations de allan00958.

Il y a plusieurs manières de centrer une boîte dans son parent, c'est d'ailleurs l'un des tutoriels les plus lus d'Alsacréations.

Globalement :
- laisser ton ul en block, appliquer "margin: auto" et une largeur à ul
- le passer en élément de contenu (display: inline-block; par exemple) et appliquer un "text-align: center;" sur le parent
- changer le mode d'affichage via Flexbox par exemple (mais il vaut mieux te renseigner sur ce module au préalable)

Bonne chance ! Smiley smile
j'ai appliqué tout sans aucune résultat ,merci de bien éclairer sachant j'ai montrer tout en ci-joint
Modérateur
Bonsoir,
si les codes HTML et CSS utilisés étaient partagés plutôt qu'un morceau dans une image qui ne démontre rien de son contexte, il y aurait probablement des réponses et des pistes plus appropriées ...

Là tu nous donne droit à un "ça marche pas" sans que l'on puisse voir ce que tu as fait des pistes données Smiley smile
Modifié par gcyrillus (31 Mar 2017 - 21:53)
Bonsoir,

ok voilà mon script :

<div class="pricearea">
                        <ul class="price_nav wow bounceIn animated"  style="visibility: visible; animation-name: bounceIn;">
                        
                          <!-- Start single Plan -->
                            <li>
                                <h2 class="price_heading" style="font-size: 20px;">Aufenthaltsideen</h2>
                                <img src="img/new.jpg" height="205px" width="272px">
                                <ul class="pfeatured_nav">
                                    <li><strong>5 Tage in Miami mit 1 Nacht im Gefängnis von Alcatraz</strong></li>
                                    <li><strong>Der Abstieg Colorados in Rafting </strong> </li>
                                    <li><strong>1 Woche in einer Ranch mitwahren Cowboys.</strong> </li>

                                </ul>
                                <span class="price_badge" style="padding-right: 34px;">Empfohlen</span>
                                <a class="get_button" href="#devis">Angebotsanfrage</a>
                            </li>
                            
                             <!-- Start single Plan -->
                            <li>
                                <h2 class="price_heading" style="font-size: 20px;">MietenalteFahrzeuge</h2>
                                <img src="img/location.jpg" height="205px" width="272px">
                                <ul class="pfeatured_nav">
                                    <li><strong>KabriolettKäfer</strong> </li>
                                    <li><strong> CorvetStingray</strong>- t </li>
                                    <li><strong>Lincoln  </strong> - </li>
                                </ul>
                                <a class="get_button" href="#devis">Angebotsanfrage</a>
                            </li>
                            
                            <!-- Start single Plan -->
                            <li>
                                <h2 class="price_heading" style="font-size: 20px;">Flüge</h2>
                                <img src="img/bag.jpg" height="205px" width="272px">
                                <ul class="pfeatured_nav">
                                    <li><strong>toto </li>
                                    <li><strong>tati </li>
                                    <li><strong>fati</li>
                                </ul>
                                <a class="get_button" href="#devis">Angebotsanfrage</a>
                            </li>
                           
                           
                        </ul>
                    </div>


pour le css:
.pricearea {
    display: inline;
    float: left;
    padding: 25px 0;
    width: 100%;
}
et UL:
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

sachant que jai ajouté les choses citée en haut mais ça marche pas si pour cela je citer mon code sans modification

Merci de vous réponse
Le site est mal codé côté html. Vous avez mit des ul dans des ul. Il aurait été plus simple, selon moi, de les séparer (ils sont uniques après tout), de mettre chaque 'offre' dans un <ul> et mettre les 3 <uls> dans un <div> (pour ajouter le h2 à l'extérieur des ul) puis mettre les 3 <divs> dans une balise <section>. Ce qui permettrait de mettre les div parents et ul en inline-block, leur mettre un largeur fixe et de center le tout en appliquant text-align center au div section.

https://jsfiddle.net/cx5daprr/1/
en fait j'ai besoin de faire les 3 en centre l'une a cote de l'autre pas une au dessous de l'autre

merci de vous réponse
Sujet clos
Aller à