Hoe kan ik een ongeordende lijst van <li>centreren in een divmet vaste breedte?
<table width="100%">
<tbody>
<tr>
<td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
<td width="59%"><p align="left"> </p>
<h1 align="left">StudioTeknik.com</h1>
<p><br align="left">
<strong>Marc-André Ménard</strong></p>
<ul>
<li>Photographie digitale</li>
<li>Infographie </li>
<li>Débug et IT (MAC et PC)</li>
<li> Retouche </li>
<li>Site internet</li>
<li>Graphisme</li>
</ul>
<p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
<p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
<p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:[email protected]"> [email protected]</a></p></td>
</tr>
</tbody>
</table>Antwoord 1, autoriteit 100%
Aangezien ulen lielementen standaard display: blockzijn — geef ze automatische marges en een breedte die kleiner is dan hun container.
ul {
width: 70%;
margin: auto;
}
Als je hun weergave-eigenschap hebt gewijzigd of iets hebt gedaan dat de normale uitlijningsregels overschrijft (zoals ze laten zweven), werkt dit niet.
Antwoord 2, autoriteit 96%
Om de ul en ook de li-elementen erin te centreren, en de breedte van de ul dynamisch te laten veranderen, gebruikt u display: inline-block; en wikkel het in een gecentreerde div.
<style type="text/css">
.wrapper {
text-align: center;
}
.wrapper ul {
display: inline-block;
margin: 0;
padding: 0;
/* For IE, the outcast */
zoom:1;
*display: inline;
}
.wrapper li {
float: left;
padding: 2px 5px;
border: 1px solid black;
}
</style>
<div class="wrapper">
<ul>
<li>Three</li>
<li>Blind</li>
<li>Mice</li>
</ul>
</div>
Bijwerken
Hier is een jsFiddle-linknaar de bovenstaande code.
Antwoord 3, autoriteit 31%
Ik ben dol op flexbox:
ul {
justify-content: center;
display: flex;
}
Antwoord 4, autoriteit 17%
Stappen:
- Schrijf
style="text-align:center;"naar bovenliggendedivvanul - Schrijf
style="display:inline-table;"naarul - Schrijf
style="display:inline;"naarli
of gebruik
<div class="menu">
<ul>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</div>
<style>
.menu { text-align: center; }
.menu ul { display:inline-table; }
.menu li { display:inline; }
</style>
Antwoord 5, autoriteit 7%
Dit is een betere manier om UL’s in een DIV-container te centreren.
Deze CSS-oplossing maakt geen gebruik van de eigenschappen Breedte en Zwevend.Zweven:Links en Breedte: 70%, zal u hoofdpijn bezorgen wanneer u uw menu op verschillende pagina’s met verschillende menu-items moet dupliceren.
In plaats van breedte gebruiken we opvulling en marge om de ruimte rond de tekst/het menu-item te bepalen. Gebruik in plaats van Float:Left in het LI-element ook display:inline-block.
Door je LI naar links te laten zweven, zweef je letterlijk je inhoud naar links en dan moet je een van de bovengenoemde hacks gebruiken om je UL te centreren. Display:inline-block maakt uw Float-eigenschap voor u (soort van). Het neemt je LI-element en verandert het in een blokelement dat naast elkaar ligt (niet zwevend).
Met Responsive-ontwerp en het gebruik van frameworks zoals Bootstrap of Foundation, zullen er problemen zijn bij het zweven en centreren van inhoud. Ze hebben een aantal ingebouwde klassen, maar het is altijd beter om het helemaal opnieuw te doen. Deze oplossing is veel beter voor dynamische menu’s (zoals het Adobe Business Catalyst-menusysteem).
Referentie voor deze tutorial is te vinden op: http: //html-tuts.com/center-div-image-table-ul-inside-div/
HTML
<div class="container">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</div>
CSS
.container {
text-align: center;
border: 1px solid green;
}
.container ul {
border: 2px solid red;
display: inline-block;
margin: 10px 0;
padding: 2px;
}
.container li {
display: inline-block;
}
.container li a {
display: inline-block;
background: #444;
color: #FFF;
padding: 5px;
text-decoration: none;
}
Antwoord 6, autoriteit 4%
Kan beide zijn
div ul
{
width: [INSERT FIXED WIDTH]
margin: 0 auto;
}
of
div li
{
text-align: center;
}
hangt af van hoe het eruit moet zien (of een combinatie daarvan)
Antwoord 7, autoriteit 3%
Om een blokobject (bijv. de ul) te centreren, moet u er een breedte op instellen en vervolgens kunt u de linker- en rechtermarge van het object op automatisch instellen.
Om de inline inhoud van het blokobject te centreren (bijv. de inline inhoud van li) kunt u de css-eigenschap text-align: center;instellen.
Antwoord 8
Probeer
div#divID ul {margin:0 auto;}
Antwoord 9
Voeg gewoon text-align: center;toe aan je <ul>. Probleem opgelost.
Antwoord 10
Interessant, maar probeer dit eens met zwevende li-elementen in de ul:
Voorbeeld hier
Het probleem nu: de ul heeft een vaste breedte nodig om echt in het midden te zitten. Hoe we het ook willen zijn ten opzichte van de containerbreedte (of dynamisch), margin: 0 auto op de ul werkt niet.
Een betere manier is om de UL/Li-lijst los te laten en een andere benadering te gebruiken voorbeeld hier
Antwoord 11
Als u de breedte van de ulweet, kunt u de marge van de uleenvoudig instellen op 0 auto;
Hiermee wordt de uluitgelijnd in het midden van de bevattende div
Voorbeeld:
HTML:
<div id="container">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<div>
CSS:
#container ul{
width:300px;
margin:0 auto;
}
Antwoord 12
Hier is de oplossing die ik kon vinden:
#wrapper {
float:right;
position:relative;
left:-50%;
text-align:left;
}
#wrapper ul {
list-style:none;
position:relative;
left:50%;
}
#wrapper li{
float:left;
position:relative;
}
Antwoord 13
Een andere optie is:
HTML
<nav>
<ul class = "main-nav">
<li> Productos </li>
<li> Catalogo </li>
<li> Contact </li>
<li> Us </li>
</ul>
</nav>
CSS:
nav {
text-align: center;
}
nav .main-nav li {
float: left;
width: 20%;
margin-right: 5%;
font-size: 36px;
text-align: center;
}
Antwoord 14
Ik heb naar hetzelfde geval gezocht en alle antwoorden geprobeerd door de breedte van <li>te wijzigen.
Helaas konden ze niet allemaal dezelfde afstand links en rechts van het vak <ul>halen.
De beste match is dit antwoordmaar het moet pas de verandering van breedte aan met opvulling
.container ul {
...
padding: 10px 25px;
}
.container li {
...
width: 100px;
}
Zie het resultaat hieronder, alle afstanden tussen <li>ook tot het vak <ul>zijn hetzelfde. 
Je kunt het controleren op deze jsFiddle:
http://jsfiddle.net/qwbexxog/14/
Antwoord 15
<div id="container">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</td>
</tr>
</table>
</div>
Antwoord 16
gebruik oldschool center-tags
<div> <center> <ul> <li>...</li> </ul></center> </div>
🙂