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>、単に に設定し、h1 タグにdisplay: blockを設定します。#content-form CSS ブロック からtext-align: centerを忘れずに削除してtext-align: centerください。.head-blackCSSに対して次の操作を行います。

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

上記の jsfiddle は、新しい変更を示しています。

于 2013-08-19T13:43:07.150 に答える