1

これに対する多くの回答を検索し、複数の人々にさまざまな解決策を試しましたが、うまくいきませんでした。誰もこれを行う簡単な方法を持っていますか?

画像例:

真ん中のコンテンツ

境界線は20px、すべての面でブラウザーの端から離れていることを意味します。助けてくれる人に大いに感謝します。

4

6 に答える 6

2

div でこの css を試してください:

position: absolute;
bottom: 20px;
top: 20px;
left: 20px;
right: 20px;
text-align: center;

垂直方向の整列の問題: 私の知る限りvertical-align: middle;、ブロックでは使用できません。コンテンツの高さを知っている (または JavaScript を使用する) 場合にのみ、問題を解決できます。

を使用できますpadding-top: 50%;が、実際には「中間」ではありません。

于 2012-11-13T13:21:08.953 に答える
1

これは、上記の回答よりも少し応答性の高いアプローチです。役立つことを願っています

CSS

#wrapper
{
    position:absolute;
    width:100%;
    height:100%;
    border:20px solid #F82;
}
#content
{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    height:20%;
    width:20%;
    top:40%;
    color:#E22;
    font-size:40pt;
}

html 

<div id="wrapper">
    <div id="content">Content</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

ここに機能的なフィドルがあります

于 2012-11-13T13:33:28.227 に答える
0

このcssはcontent-divでも機能する可能性があります

position:absolute;
margin-left: 20%;
width: 60% (100%-margin-left*2);
于 2012-11-13T13:37:18.393 に答える
0 
<html>
<head>
    <title>20PX</title>
<style type="text/css">
body{
background-color: blue;}
#test {
position: absolute;
bottom: 20px;
right: 20px;
top: 20px;
left: 20px;
text-align: center;
background-color: red;
}
</style>
</head>
<body>
    <div id="test">
     center text 
    </div>
</body>
</html>
于 2012-11-13T14:07:18.563 に答える
0

デモを更新しました。真ん中のコンテンツもご覧ください。このデモをご覧ください

div{
position:absolute;
text-align:center;
width:100%;
height:100%;
bottom: 20px;
top: 20px;
left: 20px;
right: 20px;
padding:50% 0;
}
于 2012-11-13T13:33:08.903 に答える
0

コンテンツが垂直方向に中央揃えされたサンプルを次に示します。

HTML

<div id="box">
    <div id="content">
        Content
    </div>
</div>​

CSS

#box {
    width: 200px;
    height: 200px;
    border: solid 5px #CCC;
    margin: 20px;
    position:relative
}
#content {
    position:absolute;
    top: 50%;
    width: 100%;
    margin-top:-10px; /* Should be half of font-size */
    font-size: 20px;
    text-align: center;
    color: red;
    font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
}

次の結果を生成するコード例を次に示します。

div の中央揃えのコンテンツ

EDIT (コンテンツが複数行の場合の代替)

前と同じ HTML で、次の CSS (デモ コード) を使用します。

#box {
    width: 200px;
    height: 200px;
    border: solid 5px #CCC;
    margin: 20px;
}
#content {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    color: red;
    font-size: 20px;
    font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
}

中央の 3 行のコンテンツ

于 2012-11-13T13:33:17.743 に答える