CSS単語の垂直スケール

単語を縦に並べる：中央にしたい。（ブラウザのスケーリング時に常にdivの途中にある）。私は多くの方法を試しましたが、縮尺を変えてもそれを中央に保持していません。どうやってやるの？CSS単語の垂直スケール

<div class="word"> 
    <h1>Hello!!</h1> 
</div>

出典

2016-09-25 Kindess

垂直整列は、 "：表セル表示" で動作します。上記のCSS表示プロパティを – Tommy

のdivに渡す必要がありますが、私が水平に整列させたい場合：rightとvertical-align：middle。どのように私はそれを動作させることができます。 – Kindess

あなたはフレックスを試してみることができます。あなたはこの投稿に答えがあります。または私の答えに "text-align-right"プロパティをこのdivに追加することができます。これを試してみてください - https://fiddle.jshell.net/5o7vqngs/1/ – Tommy

あなたはこの基本的なアプローチ試すことができます：こんにちは、私は次のコードとそれあなたが望むように完璧にフィットしてみてください

.word { 
 
     height: 90px; 
 
     background: #000; 
 
     color: #FFF; 
 
     line-height: 90px; 
 
    } 
 
    h1{ 
 
     font-size:5.9vw; 
 
    }

<div class="word"> 
 
    <h1>Hello!!</h1> 
 
    </div>

出典

2016-09-25 04:54:01

オペレータは、ブラウザがスケールするときにOPを中央に表示するよう要求しています。これは修正されています。 –

私はそれを右手に水平に整列させたいのですがどうすればいいですか？スケールテキストですか？私はちょうどh1タグの – Kindess

の横にスケール画像があるので、もう1つのスタイルを追加する必要がありますtext-align：right; 。もう1つ、垂直方向のテキストの整列を確認してください。https://jsfiddle.net/o6k5zese/ –

コンテンツを縦方向と横方向の両方に集中させたいのかどうかはわかりません。私はCSSでノートを作った。

あなたはフレキシボックスを使用することができます。

または親要素（複数可）が定義された高さを持っている場合、.wordsはその割合ことができ

.word { 
 
    height:300px; /* this is just for the example - it can be any height */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; /* horizontal centering. you can also use flex-start or flex-end */ 
 
    background:salmon; /* just to help show that it's working. */ 
 
}

<div class="word"> 
 
<h1>Hello!!</h1> 
 

 
</div>

。 Here's a working example in jsFiddle。

html, 
 
body { 
 
    /* This is just for the example - use whatever parent element. */ 
 
    height: 100%; 
 
    /* The height doesn't have to be a percentage. */ 
 
} 
 

 
.word { 
 
    height: 100%; 
 
    /* this is just for the example - it can be any height */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /* horizontal centering. you can also use flex-start or flex-end */ 
 
    background: salmon; 
 
    /* just to help show that it's working. */ 
 
}

<div class="word"> 
 
    <h1>Hello!!</h1> 
 
</div>

出典

2016-09-25 04:51:52

ブラウザのサイズを変更すると.word divの尺度が必要です（私は右側に単語の説明があり、左側に画像があるので）50％50％のスペースを共有します。私がbroswerをスケールすると、画像は縮小されますが、その単語は縮小されません。どのように私はそれを修正することができます – Kindess

あなたの質問は、 '.word'が任意のサイズで、テキストを拡大縮小していないときに、テキストを中央に保持する方法でした。 –

を、私はこの意志を願っています助けます。

.word { 
 
     position: relative; 
 
     width: 100%;float: left; 
 
     height: 90px; 
 
     background: #000; 
 
     color: #FFF; 
 
     line-height: 90px; 
 
    } 
 
    .word h1{ 
 
     font-size:5.9vw; 
 
     position: absolute; 
 
     left: 50%; 
 
     top: 50%; 
 
     width: auto; 
 
     margin: 0px; 
 
     transform:translate(-50%, -50%); 
 
     -webkit-transform:translate(-50%, -50%); 
 
     -moz-transform:translate(-50%, -50%); 
 
     -o-transform:translate(-50%, -50%); 
 
     -ms-transform:translate(-50%, -50%); 
 
    }

<div class="word"> 
 
    <h1>Hello!!</h1> 
 
    </div>

このため第二の方法もあなたも子要素にmargin:autoを使用することができますdisplay:flexについては

.word { 
    position: relative; 
    width: 100%; 
    float: left; 
    height: 90px; 
    background: #000; 
    color: #FFF; 
    line-height: 90px; 
    display: table; 
} 
.word h1{ 
    font-size:5.9vw; 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
}

出典

2016-09-25 07:32:53

、に従うようCSSコードを変更する作業。

.word { 
 
    height:300px; /* this is just for the example - it can be any height */ 
 
    display: flex; 
 
    background:salmon; /* just to help show that it's working. */ 
 
} 
 
.word h1{ 
 
    margin:auto; 
 
}

<div class="word"> 
 
<h1>Hello!!</h1> 
 

 
</div>

出典

2016-09-25 08:01:41 ColorWin

答えて

関連する問題