Question

＆＃13;

/* Global */
* {
	box-sizing: border-box;
}

body {
	font-family: "Lato", sans-serif;
}

/* Header */
header {
	width: 100vw;
	padding: 1.5em;

	background-color: #ccc;
}

header > a {

	background-color: yellow;
}

/* Navigation */
nav {
	display: inline-block;

	background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html>

	<head>
		<!-- Meta -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Title -->
		<title>Saad Al-Sabbagh | Web Developer</title>

		<!-- CSS -->
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">
		<link rel="stylesheet" href="css/main.css">
	</head>

	<body>

		<!-- Header -->
		<header>

			<!-- Navigation -->
			<nav>
				<a href="#">Portfolio</a>
				<a href="#">Expertise</a>
				<a href="#">About</a>
				<a href="#">Contact</a>
			</nav>

			<a href="#">Saad Al-Sabbagh</a>

		</header>

	</body>

</html>

＆＃13;

我想将直接孩子置于标题下方，这是导航之外的锚元素。

标题是全宽，导航是内联块，但是当我尝试执行text-align：center;它似乎不起作用。

我得出结论，该属性仅适用于块级元素，我确信结论是正确的。

为了将文本置于中间位置，您有何建议？

Answer 1

如果我错了，请纠正我，但这就是你想要的。我将导航列为一个列表，并在＆＃39;徽标上添加了一个课程。

.logo {
  text-align: center;
}

这将使文本保持居中，只有文本可点击，而不是整行/块。

＆＃13;

/* Global */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
}
/* Header */

header {
  width: 100vw;
  position: relative;
  padding: 1.5rem;
  background-color: #ccc;
}
header > a {
  background-color: yellow;
}
/* Navigation */

nav {
  position: absolute;
  top: 24px;
  left: 10px;
  display: inline-block;
  background-color: red;
}
.list,
.list-item {
  margin: 0;
  padding: 0;
}
.list {
  list-style: none;
}
.list-item {
  display: inline-block;
}

.logo {
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <!-- Meta -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Title -->
  <title>Saad Al-Sabbagh | Web Developer</title>

  <!-- CSS -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">
</head>

<body>

  <!-- Header -->
  <header>

    <!-- Navigation -->
    <nav>
      <ul class="list">
        <li class="list-item"><a href="#">Portfolio</a>
        </li>
        <li class="list-item"><a href="#">Expertise</a>
        </li>
        <li class="list-item"><a href="#">About</a>
        </li>
        <li class="list-item"><a href="#">Contact</a>
        </li>
      </ul>
    </nav>

    <div class="logo">
      <a href="#">Saad Al-Sabbagh</a>
    </div>

  </header>

</body>

</html>

＆＃13;

Answer 2

将锚点封在div中并为其设置以下样式。

在HTML中：

<div id="centeredAfterNav"><a href="#">Saad Al-Sabbagh</a></div>

在CSS中：

#centeredAfterNav {
    display: inline;
    /*left-margin: 100px;*/ /* Width of left aligned nav, to center in the remaining space */
    text-align: center;
}

Answer 3

已解决：原来需要绝对......

nav {
position: absolute;
left: 0;
top: 18px;
padding-left: 21px;
text-align: left;
width: 500px;
}

中心在标题中对齐锚元素

3 个答案: