html文件中左上角上边一行是长江下边一行是上海,两行字都是居中排列的源代码怎么写
时间: 2024-03-03 18:49:18 浏览: 22
你可以使用HTML和CSS来实现这个效果,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.text {
text-align: center;
font-size: 4rem;
font-weight: bold;
}
.top {
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="text top">长江</div>
<div class="text bottom">上海</div>
</div>
</body>
</html>
```
这里的代码与之前的代码基本相同,不同之处在于增加了.top和.bottom类来控制文本块的位置,通过设置它们的position属性为absolute,并分别设置其top和bottom属性为0,来实现文本块的定位。需要注意的是,这里的.container类需要设置height属性为100vh,来让其撑满整个视窗。