li center

Mit CSS < li > in einer Zeile mittig ausrichten

Zur Erstellung von Menüs wird fast immer die <ul><li> Aufzählung in HTML verwendet. Damit dan das Ganze in einer Zeile bekommt und auf der Seite in der Mitte zentriert ist, kann man folgendes Beispiel verwenden.

Hier der HTML und der CSS Code dafür.

<!DOCTYPE html>
<html>
<head>
	<title>LI Mitte</title>
	<style>
	.box {
		background-color: red;
		width: 800px;
		height: 300px;
		margin: 0 auto;
	}
	.box ul {
		text-align: center;
		padding: 10px;
		margin: 0px;

	}
	.box li {
		list-style-type: none;
		display: inline;
		margin-left: 20px;

	}

	</style>
</head>
<body>
<div class="box">
	<ul><li>Titel1</li>
		<li>Titel2</li>


	</ul>
</div>
<p><a href="https://webprogrammierung.at/" target="_blank">webprogrammierung.at</a></p>
 	

</body>
</html>

 

Beispiel Seite

2. Möglichkeit mit display: flex; CSS < li > in einer Zeile mittig ausrichten

<!DOCTYPE html>
<html>
<head>
	<title>Li Center 2 float</title>
	<style>
	.centerbox {
		margin: 0 auto;
		width: 400px;
		height: 250px;
		background-color: red;
		color: blue;

	}
	.centerbox ul {
		display: flex;
  		justify-content: center;
  		list-style-type: none;

	}

	.centerbox li {
		padding: 0 5px;


	}

	</style>
</head>
<body>
<div class="centerbox">
	<ul><li>Punkt1</li>
	<li>Punkt2</li>
	<li>Punkt3</li>
	</ul>
</div>
</body>
</html>

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*