1

を使用して、いくつかのコンテナでテキストを垂直方向に揃えようとしていますが、line-heightうまくいきません。これまで問題があったことは一度もありませんが、何らかの理由で現在は正しく整列しません。

今、私はおそらくすべてのコーディングから目が見えていませんが、問題がどこにあるのかを見つけることができないようです...

これは私のHTMLがどのように見えるかです:

<div class="formLabel">
    <div class="labelNumber">D</div>
    <div class="labelTitle">
        <h2>New Password</h2>
        <p>Check Help for character and length restrictions</p>
    </div>
</div>

そして、これは私のCSSがどのように見えるかです:

.formLabel
{
    position: relative;
    width: 400px;
    height: 40px;
    padding: 20px 0px 0px 10px;
    margin: 0;
}

.labelNumber
{
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #191919;
    font: bold 18px Arial;
    color: #555555;
    text-align: center;
    padding: 0;
    margin: 0;
}

.labelNumber縦に並べようとしているのはコンテナ内の文字です。

4

2 に答える 2

4

line-height 属性は簡略font構文の一部であるため、line-height をその後に置くか、font 属性に統合します。

.labelNumber {
  float: left;
  width: 30px;
  height: 30px;
  background: #191919;
  font: bold 18px/30px Arial; /** Font-size / Line-height */
  color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
}

基本的に、フォント属性は行の高さを上書きしていました。

于 2012-07-06T23:03:49.333 に答える
3

現在のコードの問題は、CSS 宣言の順序により、ブラウザが宣言を忘れることを余儀なくされていることです。これは、その後、省略形の構文line-height: 30px;を使用しているためです。fontfont: bold 18px Arial;

次の 2 つのオプションのいずれかで問題を解決できます。

  • line-height: 30px;を の後に移動しfont: bold 18px Arial;ます。

    この実用的なフィドルの例を参照してください。

    .labelNumber {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #191919;
  font: bold 18px Arial;
  line-height: 30px;
  color: #555555;
  text-align: center;
  padding: 0;
  margin: 0;
}

  • を緩めて、短縮形line-height: 30px;を に更新します。fontfont: bold 18px/30px Arial;

    この実用的なフィドルの例を参照してください。

    .labelNumber {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #191919;
  font: bold 18px/30px Arial;
  color: #555555;
  text-align: center;
  padding: 0;
  margin: 0;
}

ここでfont省略構文について読むことができます。

補足として:コード削減の目的で、2 番目のオプションが推奨されます。

于 2012-07-06T23:13:22.463 に答える