Lista nie chce się wyśrodkować

0

Nie mogę sobie poradzić z wyśrodkowaniem listy. Kod wygląda tak:

<html>
	
	<head>
		<style>
			body
			{
				color: #303030;
				text-align: center;
			}
			#container
			{
				width: 1000px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>

	<body>
		<div id="container">
			To jest lista
			<ul>
				<li>element</li>
			</ul>
		</div>
	</body>

</html>

Ta "kropeczka" nie chce się wyśrodkować.

0

Na dobrą sprawę kropeczka jest wyśrodkowana. Element posiada swój własny margines, dlatego jest przesunięty w stosunku do napisu "To jest lista". Jeżeli chcesz usunąć margines możesz dodać do styli:

ul {
    padding: 0;
}

Albo ustawić ujemny margines.

Powyższe ma zastosowanie do wszystkich elementów < ul > na stronie. Jeżeli chcesz wyśrodkować tylko poszczególne elementy, dodaj do nich osobną klasę. Przykład:

<body>
        <div id="container">
            To jest lista
            <ul class="no-margin">
                <li>element</li>
            </ul>
            <ul>
                <li>element 2</li>
            </ul>
        </div>
    </body>

.no-margin{
    padding: 0;
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1