html - 故障中心

标签 html css

我正在开发我的网页,我遵循了本教程“https://www.youtube.com/watch?v=1tdRozm__K0”。我唯一想改变的是将文本居中。我一直没能把它做好。已经很接近了,但我的强制症不允许这样做。非常感谢您的帮助。

谢谢

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;
}
<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>

最佳答案

你有固定宽度的容器,只需将其移除并将 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>

关于html - 故障中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29641314/

相关文章:

html - 使用 CSS 设置标题样式

javascript - 如何使用只读的 HTML5 在客户端验证字段?

javascript - 裁剪不规则形状的图像并拉伸(stretch)它

html - CSS float 属性创建幻像边距

javascript - 不显示时如何为div添加时间延迟

html - 我怎样才能使这个文本可选择?

css - 如何将多个图像放在多个背景的中心

javascript - 使用 Javascript 启用复选框

html - Bootstrap col-md-6 垂直居中对齐

css - 无需手动标记要设置样式的每个属性即可设置 QML 样式