gpt4 book ai didi

css - 无法使用 HTML5/CSS 将文本居中

转载 作者:行者123 更新时间:2023-11-28 04:58:58 25 4
gpt4 key购买 nike

我试图简单地以如下形式将文本水平居中:

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="contact-form">
<head-black>STEWARD'S WEEKLY REPORT</head-black><br>
</div>
</html>

style.css 的内容:

#contact-form {  
background-color:#F2F7F9;
width:925px;
padding:10px;
margin: 10px auto;
border: 6px solid #8FB5C1;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:15px;
position:relative;
}

#contact-form head-black {
display:inline-block;
font-size:14px;
text-decoration:underline;
text-align:center;
}

文本保持左对齐。

最佳答案

<head-black>是非标准的 HTML 语法。自定义标签的使用should be avoided .相反,使用:

<h1 class="head-black">STEWARD'S WEEKLY REPORT</h1>

和 CSS:

#contact-form {  
background-color:#F2F7F9;
width:925px;
padding:10px;
margin: 10px auto;
border: 6px solid #8FB5C1;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:15px;
position:relative;
text-align:center; /* put this here */
}

#contact-form .head-black {
display:inline-block;
font-size:14px;
text-decoration:underline;
}

jsfiddle

编辑

如果您只想将 <h1> 居中,只需将其设置为 display: block , 并设置 text-align: center在 h1 标签中。不要忘记删除text-align: center来自#content-form CSS block 。对 .head-black 执行以下操作CSS:

#contact-form .head-black {  
display:block;
font-size:14px;
text-decoration:underline;
text-align: center;
}

上面的 jsfiddle 显示了新的变化。

关于css - 无法使用 HTML5/CSS 将文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18315265/

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