1

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

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

文本保持左对齐。

4

1 回答 1

6

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

<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 标签中设置 。不要忘记从 #content-form CSS 块中删除text-align: center。.head-black对CSS执行以下操作：

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

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

于 2013-08-19T13:43:07.150 回答