我正在开发我的网页,我遵循了本教程“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/