Question

我似乎无法在没有拉伸页面的情况下将链接h1居中。我知道如何使用text-align：center来居中，并且它居中，链接正在拉伸页面的整个宽度。

我可以在没有伸展的情况下使链接居中吗？

.navigation {
	padding-top: 70px;
	padding-bottom: 70px;
	position: relative;
	text-transform: uppercase;
	
}

.brand-text {
  font-family: 'Permanent Marker', cursive;
	font-size: 50px;
	color: black;
	-webkit-transition: color 1000ms ease;
	text-align: center;
	margin-bottom: 20px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
  padding: 0;
  display: block;
}


.brand-text:hover {
	color: grey;
	
}

.nav-brand {
	text-decoration:none;
}

.nav-menu {
	text-align: center;
}

.nav-link {
	padding-top: 7px;
	padding-bottom: 7px;
	margin-right: 20px;
	margin-left: 20px;
	text-decoration: none;
	color: grey;
	font-family: 'Raleway', sans-serif;
	-webkit-transition: color 700ms ease;
	position: relative;
}

.nav-link:hover {
	color: black;
}

.current {
  color: black;
}

.current:hover {
  color:
}

<!DOCTYPE html>
<html>
<head>
	<title>Josh Corbett</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

</head>
<body>
	<div class="navigation">
		<a class="nav-brand" href="#"><h1 class="brand-text">Title</h1></a>
		<div class="container">
			<nav class="nav-menu" role="navigation">
				<a class="nav-link current" href="#">Portfolio</a>
				<a class="nav-link" href="#">About</a>
				<a class="nav-link" href="#">Contact</a>
				<a class="nav-link" href="#">Blog</a>
			</nav>
		</div>
	</div>
</body>

Answer 1

你可以添加overflow：hidden;在你的品牌文字中。你也可以尝试做

#LinkText {
      width: 100%;
      height: auto;
      overflow: hidden;
}

并将LinkText的id赋予H1标记。

Answer 2

锚点正在拉伸页面的整个宽度，因为h1标签是一个块元素并占据页面的整个宽度...因此锚点会将其大小调整为标题标签的大小。放置到放置锚标签作为父......这是一个解决方案

在下面添加css代码

  #title {
  display: inline-block;
  position: relative;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  -ms-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  border: medium solid !important;
}

注意：旧broswers不支持转换属性....

请参阅下面的代码段

position: relative;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  -ms-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  border: medium solid !important;
}

.navigation {
  padding-top: 70px;
  padding-bottom: 70px;
  position: relative;
  text-transform: uppercase;
}
.brand-text {
  font-family: 'Permanent Marker', cursive;
  font-size: 50px;
  color: black;
  -webkit-transition: color 1000ms ease;
  text-align: center;
  margin-bottom: 20px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding: 0;
  display: block;
}
.brand-text:hover {
  color: grey;
}
.nav-brand {
  text-decoration: none;
}
.nav-menu {
  text-align: center;
}
.nav-link {
  padding-top: 7px;
  padding-bottom: 7px;
  margin-right: 20px;
  margin-left: 20px;
  text-decoration: none;
  color: grey;
  font-family: 'Raleway', sans-serif;
  -webkit-transition: color 700ms ease;
  position: relative;
}
.nav-link:hover {
  color: black;
}
.current {
  color: black;
}
.current:hover {
  color:
}
#title {
  display: inline-block;
  position: relative;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  -ms-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  border: medium solid !important;
}

<!DOCTYPE html>
<html>

<head>
  <title>Josh Corbett</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

</head>

<body>
  <div class="navigation">
    <a class="nav-brand" href="#" id='title'><h1 class="brand-text">Title</h1></a>
    <div class="container">
      <nav class="nav-menu" role="navigation">
        <a class="nav-link current" href="#">Portfolio</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Contact</a>
        <a class="nav-link" href="#">Blog</a>
      </nav>
    </div>
  </div>
</body>

将我的标题链接居中而不拉伸页面

2 个答案: