0

この質問が何度も出てくることを私は知っています。CSSの垂直方向の配置は大きな問題のようです...

Kinesiologie Stammheimこのサイトの頭にある 2 つのテキスト (とDies ist der Platzhalter für ein Zitat zum Thema Erde) を中央に揃えようとしています: http://www.kine-stammheim.ch/ikmethode.html

私の CSS ファイルはここにあります: http://www.kine-stammheim.ch/css/screen/screen-PAGE-layout.css

vertical-align:middle;、、など、Googleが提示するさまざまな提案をすべて試しましたdisplay:inline-block;が、成功しませんでした。

これらのテキストを中央に垂直に揃える正しい方法は何ですか?

4

5 に答える 5

2

純粋な CSS、クロス ブラウザー、特定のマージンなし、絶対配置なし、行の高さの設定なし

これをチェックしてくださいdemo

HTML: (必要なものをすべて入れてくださいCentered)

<div class="Container">
    <div class="Centered">
        <p>Herzlich Willkommen</p>
        <p>Hier entsteht der Webauftritt der Kinesiologie Stammheim.</p>
    </div>
</div>

CSS:

.Container
{
    height: 400px; /*For the demo*/
    background-color: #d3d3d3;
    text-align: center; /*optional*/
}
.Container:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.Centered
{
    background-color: yellow;
    display: inline-block;
    vertical-align: middle;
}

説明: 空のinline-block要素 (高さ 100%) をコンテナーに追加し、Centereddiv を中央 (常にコンテナーの中央) に揃えます。

于 2013-10-08T10:59:16.670 に答える
1

レイアウトの問題を軽視する必要があります。

これが最初のものを修正する方法です。

<div id="logo">

    <img class="logo_img" src="../../images/logo.png"></img>
    <div class="logo_text"> … </div>

</div>

.logo_img {
    height: 100px;
    margin: 10px 20px 10px 0px;
    vertical-align: middle;
}

.logo_text {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 600;
    font-size: 133.33%;
    display: inline-block;
    line-height: 1.5em;
    vertical-align: middle;
}

に関連する部分#logoでは、 をフロートせずimg、インラインまたはインラインブロック要素として保持し、 を設定しvertical-align: middleます。

について.logo-textは、 と を追加display: inline-blockしvertical-align: middleます。

これにより、画像とテキスト ブロックがヘッダー ブロックの垂直方向の中央に配置されます。

に関連する問題 2 については.quote、

<div id="banner">
    <div class="quote"> … </div>
</div>

.quote {
    font-family: "Times New Roman",Times,serif;
    color: white;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 200%;
    line-height: 120px;
    vertical-align: middle;
}

この場合line-height: 120px、ヘッダー ブロックの高さを制御する画像の高さに一致するように を設定します。

ただし、引用符が 2 行目に折り返される場合、これはうまく機能せず、テーブル セル アプローチの方が適しています。

Firefox のコード インスペクターを使用した結果は次のとおりです。

ここに画像の説明を入力

于 2013-10-08T11:01:49.593 に答える
0

親部門を として宣言しposition:relative、子部門をとして宣言するとposition:absolute、これを簡単に調整できます。

左、右、上、下を使用して、必要な場所を調整します。

于 2013-10-08T10:50:22.753 に答える
0

このコードが役立つと思います。これらのクラスを編集するだけです:

.quote {
font-family: "Times New Roman", Times, serif;
color: white;
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 200%;
line-height: 1.5em;
vertical-align: middle;
display: table-cell;   /*added*/
}

#banner {
background-image: url(../../images/erde.jpg);
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
height: 120px;
display: table;    /*added*/
width: 100%;       /*added*/
}
于 2013-10-08T11:15:33.627 に答える