|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
<title>Document1 </title>
<style>
body{
color:black;
background: white;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
header{
background:gray;
margin: 20px 40px 20px 50px;
}
section{
background:lightpink;
color:black;
padding:20px;
display:flex;
flex-direction:row;
height: 300px;
}
article{
text-align: center;
position: absolute;
font-size:xx-large;
}
div{
background:red;
margin:auto;
width:100px;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
display:inline-block;
margin:10px;
width:auto;
color:white;
}
.headcenter{
text-align:center;
m
}
footer{
background:lightblue;
height:40px;
}
</style>
</head>
<body>
<h1>let`s start it</h1>
<header>
<nav>
<ul>
<li>Google Artists & Culture</li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li>Home </li>
<li>Explore</li>
<li>Nearby</li>
<li>Favorite</li>
<li><img src="download.png" height=20px; width:10px;></li>
</ul>
</nav>
</header>
<section>
<a class="headcenter"><article>Artist-Ting</article></a>
<div>a</div>
<div>b</div>
<div>c</div>
</section>
<section>lower-section</section>
<footer>footer</footer>
</body>
</html>
article没宽度 被文字撑开 再text-align也没啥用 可以这样:
- article{
- position: absolute;
- left:0;
- right:0;
- margin: auto;
- font-size:xx-large;
- }
复制代码
或者 article给父元素的100%宽度
- article{
- text-align: center;
- position: absolute;
- width:100%;
- font-size:xx-large;
- }
复制代码
|
|