Question

我正在开发我的网页，我按照本教程＆＃34; https://www.youtube.com/watch?v=1tdRozm__K0＆＃34;。我唯一要改变的是将文本集中在一起。而且我还没有能够做到正确。它已经接近了，但我的OCD只是不允许它。非常感谢帮助。

由于

＆＃13;

body {
	width: 100%;
	margin: auto;
	font-family: Helvetica;
}

.header {
	background: #383838;
	width: 100%;
	top: 0;
	position: fixed;
}

.container {
	width: 960px;
	margin: 0 auto;
}

.logo {
	float: center;
	font-size: 15;
	color: white;
}

＆＃13;

<DOCTYPE html>
<html>
	<head>
		<title>Website</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	
	<body>
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		
		<div class="header">
			
			<div class="container">
				
				<div class="logo">
					<h1>WEBSITE</h1>
				</div>
			
			</div>
		
		</div>
	</body>
</html>

＆＃13;

Answer 1

您有固定的容器宽度，只需删除它并将text-align:center提供给.logo。

检查出来：

body {
	width: 100%;
	margin: auto;
	font-family: Helvetica;
}

.header {
	background: #383838;
	width: 100%;
	top: 0;
	position: fixed;
}

.container {
	margin: 0 auto;
}

.logo {
	float: center;
	font-size: 15;
	color: white;
    text-align:center;  // Here align center make text center.
}

<DOCTYPE html>
<html>
	<head>
		<title>Website</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	
	<body>
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		
		<!-- IGNORE THIS! THIS IS FOR LiveReload -->
		
		<div class="header">
			
			<div class="container">
				
				<div class="logo">
					<h1>WEBSITE</h1>
				</div>
			
			</div>
		
		</div>
	</body>
</html>

麻烦中心

1 个答案: