Question

我想居中“标头”的内容，我不知道为什么它是左，而不居中。我应该将图像作为的一部分吗？我试过text-align：center;但这不起作用。 ................................................... ................................................... ................................................... ..

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="home.css" rel="stylesheet" type="text/css">
        <title>I.S.R.F.</title>
    </head>
    <body>
        <header>
            <ul class="left">
                <li><a href="">HOME</a></li>
                <li><a href="">ALBO</a></li>
            </ul>
            <img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
            <ul>
                <li><a href="">L'ISTITUTO</a></li>
                <li><a href="">CONTATTI</a></li>
            </ul>
        </header>
    </body>
</html>

{{1}}

Answer 1

将justify-content: center添加到您的.header中，这应该居中。详细了解box model和flexbox

header{
	display: flex;
	align-items: center;
  justify-content: center;
	
}
.logo{
	width: 300px;
	height: 170px;

}
ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
li a{
	text-decoration: none;
	color: black;
}
li{
	display: inline;
	margin: 20px;
	padding-top: 40px;
	
}

 <header>
		 <ul class="left">
			 <li><a href="">HOME</a></li>
			 <li><a href="">ALBO</a></li>
		 </ul>
		    <img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
		 <ul>
			 <li><a href="">L'ISTITUTO</a></li>
			 <li><a href="">CONTATTI</a></li>
		 </ul>
	  </header>

Answer 2

添加header：justify-content: center

header{
	display: flex;
	align-items: center;
	justify-content: center
}
.logo{
	width: 300px;
	height: 170px;

}
ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
li a{
	text-decoration: none;
	color: black;
}
li{
	display: inline;
	margin: 20px;
	padding-top: 40px;
	
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="home.css" rel="stylesheet" type="text/css">
  <title>I.S.R.F.</title>
 </head>
 <body>
	 <header>
		 <ul class="left">
			 <li><a href="">HOME</a></li>
			 <li><a href="">ALBO</a></li>
		 </ul>
		    <img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
		 <ul>
			 <li><a href="">L'ISTITUTO</a></li>
			 <li><a href="">CONTATTI</a></li>
		 </ul>
	  </header>
		 
	 
	 
 </body>
</html>

如何将导航栏的徽标居中？

2 个答案: