Ik moet een ongeordende lijst van onbekende breedte centreren, terwijl u nog steeds de lijst-items opgelijnd hebt.
bereik hetzelfde resultaat als dit:
html
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
div { text-align: center; }
ul { display: inline-block; text-align: left; }
behalve mijn <ul>heeft geen ouder div. ul { margin: 0 auto; }werkt niet omdat ik geen vaste breedte heb. ul { text-align: center; }werkt niet omdat de lijst-items niet meer worden opgelijnd. Dus hoe kan ik dit centreren <ul>terwijl u de <li>S LINKERSINSTELLING (zonder een ouderwandwikkel) te houden)?
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Bewerken : Misschien was mijn formulering niet de beste … Het eerste blok code werkt al … wat ik nodig heb is om het zonder te doen <div>wrapper, als dat natuurlijk mogelijk is. Floatrucs? Pseudo-elementtricks? Er moet een manier zijn.
Antwoord 1, Autoriteit 100%
ul {
display: table;
margin: 0 auto;
}<html>
<body>
<ul>
<li>56456456</li>
<li>4564564564564649999999999999999999999999999996</li>
<li>45645</li>
</ul>
</body>
</html>Antwoord 2, autoriteit 3%
Laten we zeggen dat de lijst is:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
Voor dit voorbeeld.
Als ik het goed begrijp, wil je dat de lijstitems in het midden van het scherm staan, maar je wilt dat de tekst IN die lijstitems links van het lijstitem zelf wordt gecentreerd. Dat doen is eigenlijk vrij eenvoudig. Je hebt alleen wat CSS nodig:
ul {
display: table;
margin: 0 auto;
text-align: left;
}
En het werkt! Hier is wat er gebeurt. Ten eerste zeggen we dat we alleen ongeordende lijsten willen beïnvloeden. Vervolgens doen we de truc van Rafael Herscovici om de lijstitems te centreren. Ten slotte zeggen we om de tekst links van de lijstitems uit te lijnen.
Antwoord 3, autoriteit 2%
Als u een ongeordende lijst wilt centreren, moet u de eigenschap CSS-tekst uitlijnen gebruiken. Daarnaast moet je ook de ongeordende lijst in het div-element plaatsen.
Voeg nu de stijl toe aan de klasse div en gebruik de eigenschap text-align met center als waarde.
Zie het onderstaande voorbeeld.
<style>
.myDivElement{
text-align:center;
}
.myDivElement ul li{
display:inline;
}
</style>
<div class="myDivElement">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Hier is de referentiewebsite Center Align Unororged List
Antwoord 4
Als het mogelijk is om uw eigen lijstkogels te gebruiken
Probeer dit:
<html>
<head>
<style type="text/css">
ul {
margin:0;
padding:0;
text-align: center;
list-style:none;
}
ul li {
padding: 2px 5px;
}
ul li:before {
content:url(https://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Antwoord 5
Lijst-stijl-positie: binnen
Gebruik list-style-position:inside:
ul {
text-align: center;
list-style-position: inside;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>Antwoord 6
Door bootstrap te gebruiken, kunt u de klassencontainer toevoegen om deze te centreren. Werkte erg goed voor mij
Antwoord 7
Uit je bericht begrijp ik dat je de breedte niet op je li kunt instellen.
Wat dacht je hiervan?
ul {
border:2px solid red;
display:inline-block;
}
li {
display:inline;
padding:0 30%; /* try adjusting the side % to give a feel of center aligned.*/
}<ul>
<li>Hello</li>
<li>Hezkdhkfskdhfkllo</li>
<li>Hello</li>
</ul>Antwoord 8
In het geval dat de stippen aan de linkerkant zijn geplakt terwijl de tekst in het midden is uitgelijnd. U kunt de “ul” uit het script verwijderen.
Voorbeeld:
<!doctype html>
<html>
<style>
div.list {
text-align: center;
}
</style>
<body>
<div class="list">
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
</div>
</body>
</html>