gpt4 book ai didi

html - 为什么我的标题和段落在同一行?

转载 作者:太空宇宙 更新时间:2023-11-04 14:51:19 25 4
gpt4 key购买 nike

我已经搜索了几个小时,但找不到能够为我的案例工作的答案。

我正在尝试为我正在编写的个人使用的 wordpress 插件制作一个简单的(一行标题,一行段落)页面,所有文本在垂直和水平方向上都居中,但标题和段落始终显示在同一行,像这样:


Server Is Down游戏服务器当前已关闭。请稍后再回来查看。


页面完整代码如下:

<?php $sitename = get_bloginfo('name'); ?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $sitename; ?> - Game Server Is Down</title>
<style>
body {
margin: 0;
}

.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="centered">
<h1>Server Is Down</h1>
<p>The game server is currently down. Please check back later.</p>
</div>
</body>
</html>

我在这里错过了什么?

最佳答案

Flex 的使用使两个元素在同一行上,因为默认的 flex-directionrow

使用

  flex-direction: column;

例子:

body {
margin: 0;
}

.centered {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
<div class="centered">
<h1>Server Is Down</h1>
<p>The game server is currently down. Please check back later.</p>
</div>

关于html - 为什么我的标题和段落在同一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50648361/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com