いつもページの真ん中にテキストがあります

-1

私は基本的に、ページの中央にテキストを置いて、画面上のフォントサイズを基準にしたいと考えています。いつもページの真ん中にテキストがあります

私は基本的にブラウザにつぶやきを表示するアプリケーションをまとめようとしていますが、それはかなり簡単です。

これまでのところ、私はHTML持っている：

<html> 
<head> 

    <link rel=StyleSheet href="/static/style.css" type="text/css" media="screen"> 

</head> 

<body> 

<div id="content"> 
    {{ tweet }} 
</div> 


</body> 
</html>

そして、私は途中でテキストを取得するためのパディングを使用しています：

html, body { 
    background-color: #c13192; 
    color: white; 
    font-family: Arial; 
    text-align: center; 
    font-size: 175%; 
    max-height: 100%; 
} 

#content { 
    padding-top: 20%; 
    padding-bottom: 20%; 
    padding-left: 15%; 
    padding-right: 15%; 

}

私はの真ん中にあるようにCCONTENTを希望しますページは画面を超えて拡大する必要はありません。したがって、スクロールする必要はなく、コンテンツは常に中間になるように適切なサイズになります。

編集：私は単純なオーバーフローでそれを解決することができたと思います。

出典

2017-01-07 Levo

ハンドルのdivセンタリング位置：0自動;メディアクエリを使用してフォントを調整します。 –

ページの中央/真ん中で何かを中央に、あなたは水平方向と垂直方向の両方で、それを中心に説明されtransform: translate(-50%,-50%);とleft: 50%; top: 50%;の組み合わせを使用することができます。

フォントサイズを画面に相対的にするには、vwとvh単位を使用できます。マージン使っ

#content { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    font-size: calc(1em + 1vw); 
 
}

<html> 
 
<head> 
 

 
    <link rel=StyleSheet href="/static/style.css" type="text/css" media="screen"> 
 

 
</head> 
 

 
<body> 
 

 
<div id="content"> 
 
    {{ tweet }} 
 
</div> 
 

 

 
</body> 
 
</html>

出典

2017-01-07 20:00:25

一般的にdivや要素の中央にパディングを使用しないでください。 text-align:center;を使用すると、多くのものを集中できます。 Divsでは、margin-left:auto; margin-right:auto;を親の中心に置く必要があります。

html, body { 
 
    background-color: #c13192; 
 
    color: white; 
 
    font-family: Arial; 
 
    text-align: center; 
 
    font-size: 175%; 
 
    max-height: 100%; 
 
} 
 

 
.content { 
 
    padding-top: 20%; 
 
    margin-left: auto; 
 
    margin-right:auto; 
 
}

<html> 
 
<head> 
 

 
    <link rel=StyleSheet href="/static/style.css" type="text/css" media="screen"> 
 

 
</head> 
 

 
<body> 
 

 
<div class="content"> 
 
    I am the tweet content 
 
</div> 
 

 

 
</body> 
 
</html>

出典

2017-01-07 19:42:38

いつもページの真ん中にテキストがあります

答えて

関連する問題