无法使用HTML5/CSS居中文本

Question

无法使用HTML5/CSS居中文本

我只想简单地将文本水平居中,形式如下:

<!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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

文本保持左对齐.

Answer 1

Bri*_*ips 6

<head-black>是非标准的HTML语法.应避免使用自定义标签.相反,使用:

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

Run Code Online (Sandbox Code Playgroud)

和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;   
}

Run Code Online (Sandbox Code Playgroud)

的jsfiddle

编辑

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

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，6 月前
查看次数：	3910 次
最近记录：	12 年，6 月前