"vertical-align:中"な揃えの中ョン

StackOverflow https://stackoverflow.com/questions/732139

  •  06-09-2019
  •  | 
  •  

質問

監督-選手コメンalignテキストのサイズが異なる垂直し、Firefoxを表示す小さなテキストの上に道をしたいです。

CSS:

div.categoryLinks {
    margin: 1em 16px;
    padding: 0 4px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ece754;
    background: #f7f5b7;
    color: #a49f1c;
    text-align: center;
    font-size: 1.4em;
}
div.categoryLinks em {
    font-size: 0.6em;
    font-style: normal;
    vertical-align: middle;
}

HTML:

<div class="categoryLinks">
    <em>SECTION:</em>
    Page One &#183;
    Page Two &#183;
    <a href="link">Page Three</a>
</div>

スクリーンショット:screenshot
（出典： doheth.co.英国)

更新:か認識しています-または以下の方 vertical-align 作品についかに誤解.

さらに、調査のうち最も簡単な方法で固定するのを包む大きなテキスト span および設定 vertical-align ります。の子どもの .categoryLinks その後わせに対す。いので、より良いブラウザでクッキーのマークアップ?

役に立ちましたか？

解決

縦を揃えるだけの作品として期待されるテーブルの細胞またはインライン-ブロックです。もう少し詳しい情報をご提案いたしま 理解vertical-align、"どのような)を垂直にセンターコンテンツ".

編集： なんか何かでその作品は自分にとっては動作します。いものを落としたフォントサイズの部：すぐにでも中心である。ご利用開いているのがfirebugの一覧をCSSに影響するのですか？

この作品としては:

<html>
<head>
<style type="text/css">
div.categoryLinks {
        margin: 1em 16px;
        padding: 0 4px;
        border-width: 1px 0;
        border-style: solid;
        border-color: #ece754;
        background: #f7f5b7;
        color: #a49f1c;
        text-align: center;
        font-size: 1.4em;
}
div.categoryLinks em {
        font-size: 0.4em;
        font-style: normal;
        vertical-align: middle;
}
</style>
</head>
<body>
<div class="categoryLinks">
        <em>SECTION:</em>
        Page One &#183;
        Page Two &#183;
        <a href="link">Page Three</a>
</div>
</body>

注意： 第文字サイズ変更0.4emから0.6emことを強調したら教えて下さい。

他のヒント

Firefoxはレンダリングます。に、vertical-alignプロパティはインラインつけるとともに、大いにブロック要素のような <div> （ <p>します。加えてみ 表示:インライン とを確認してくださいまります。

縦alignはないとみられ適用インライン-ブロック要素だと思い画像のうち、とりわけこのレイアウトによりデフォルトで使用する位置のインライン要素、最初ので、インラインブロックを利用することができmarginとpaddingの位置ですのと同様で今の通常のブロック要素:

div.categoryLinks {
        margin: 1em 16px;
        padding: 0 4px;
        border-width: 1px 0;
        border-style: solid;
        border-color: #ece754;
        background: #f7f5b7;
        color: #a49f1c;
        text-align: center;
        font-size: 1.4em;

}
div.categoryLinks em {
            font-size: 0.6em;

           display:inline-block;
        vertical-align:top;
        font-style: normal;
        padding: 2px 0 0 0;

}

い 調整することにしていfirefox2 が、このraer例firefoxのサポートしておりません。それができない邪魔に調整して少数の人々が利用ffx2して、非常にマイナーなデザインの欠陥.

いが、この問題を取り除くだけで:

 white-space: nowrap;

親会社から事業部なんなのか、なぜこのルールの追加、Firefoxなの適用:

vertical-align: middle;

また、同じ問題です。この作品は私にとって:

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top