Question

我试图把我的ul放在中心，但我似乎无法将它放在中心位置。我尝试过使用display: table margin: 0 auto将ul放在中间，但不完全放在中心。我也尝试将display: block与margin: 0 auto一起使用，但不能将其置于中心位置

＆＃13;

* {
	margin: 0;
	padding: 0;
	font-family: Helvetica;
}

header {
	background-color: black;
	color: white;
	padding: 25px;
	text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Droplet Games - Official Site</title>
		<link rel="stylesheet" href="css/styles-index.css">
	</head>
	
	<body>
		<header>
			<h1>DROPLET GAMES</h1>
			<ul>
				<li><a class="active" href="#home">Home</a></li>
				<li><a href="#news">Games</a></li>
				<li><a href="#contact">Contact</a></li>
				<li><a href="#about">About</a></li>
			</ul>
		</header>
</html>

＆＃13;

Answer 1

您可以将此规则添加到<ul>：

display: inline-block;

＆＃13;

* {
	margin: 0;
	padding: 0;
	font-family: Helvetica;
}

header {
	background-color: black;
	color: white;
	padding: 25px;
	text-align: center;
}

ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Droplet Games - Official Site</title>
		<link rel="stylesheet" href="css/styles-index.css">
	</head>
	
	<body>
		<header>
			<h1>DROPLET GAMES</h1>
			<ul>
				<li><a class="active" href="#home">Home</a></li>
				<li><a href="#news">Games</a></li>
				<li><a href="#contact">Contact</a></li>
				<li><a href="#about">About</a></li>
			</ul>
		</header>
</html>

＆＃13;

Answer 2

我认为问题不是那么多，你希望main.cpp元素居中，而是你想要里面的菜单项（ul项目） li要居中。

只需将ul上的样式从li更改为float:left即可解决整个问题。见下文。

＆＃13;

display:inline-block

＆＃13;

* {
	margin: 0;
	padding: 0;
	font-family: Helvetica;
}

header {
	background-color: black;
	color: white;
	padding: 25px;
	text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    display:inline-block;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

＆＃13;

Answer 3

听起来像display: inline-block;正是您所需要的。

正如名称所暗示的那样，double的元素就其父级而言就像display: inline-block;元素一样，内部就像inline一样元件。

此处的使用需要一个block和width: 100%;的容器。我使用了下面的text-align: center;元素。然后可以<nav> <ul>来获得您想要的效果。

您还可以将display: inline-block;与display: inline-block;及其子display: inline;元素结合使用<li>，以避免<a>使用float: left;

li {
  display: inline;
}
li a {
  display: inline-block;
  ...
}

＆＃13;

* {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}
header {
  background-color: black;
  color: white;
  padding: 25px;
  text-align: center;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
}
li {
  display: inline;
}
li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: red;
}
nav {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

＆＃13;

<header>
  <h1>DROPLET GAMES</h1>
  <nav>
    <ul>
      <li><a class="active" href="#home">Home</a>
      </li>
      <li><a href="#news">Games</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
      <li><a href="#about">About</a>
      </li>
    </ul>
  </nav>
</header>

＆＃13;

无法居中ul

3 个答案: