divの上端と下端の間にテキストを配置するにはどうすればよいですか？

divの途中にテキストを揃えたいが、それを機能させることができない。これどうやってするの？divの上端と下端の間にテキストを配置するにはどうすればよいですか？

ありがとうございました！

<div style="height:40px;">Personal Information</div>

「個人情報」は、中央と下の中央に配置する必要があります。

出典

2011-02-02 Andrew

ここにあなたの問題を示してください。http://jsfiddle.net/ – Hawxby

作成線高要素のサイズ。ただし、1行のテキストしかない場合にのみ機能します。

出典

2011-02-02 21:26:25 yoda

CSS：

myDiv 
{ 
display:table-cell; 
vertical-align:middle; 
}

INLINE：

<div style="display:table-cell; vertical-align:middle;">Personal Information</div>

UPDATE：

これはJSFIDDLEに取り組んでいます...

div { 
display:table-cell; 
width: 200px; 
height: 200px; 
vertical-align:middle; 
background: red; 
}

出典

2011-02-02 21:28:11

http://jsfiddle.net/seFEj/ – yoda

text-middleはそのプロパティの有効な値ではありません – Andrew

vertical-alignを行っています：middル;その中のテキストではなくdivを整列させるだけです。これを迷惑にすることは申し訳ありません。私は簡単な解決策があると思った。 – Andrew

あなたにtable-cell表示スタイルを使用することができますこれを達成する：

CSS

display: table-cell; 
vertical-align: middle;

出典

2011-02-02 21:30:05

は黄色が、それはdiv要素この程度

<html> 
    <body> 
    <div style="height:40px; background-color:yellow"> 
    <div style="position:absolute; top:50%; display:table">Personal Information</div> 
    </div> 

    </body> 
    </html>

出典

2011-02-02 21:38:23

方法の中心にあることを示すことがある（これを試してみてください？

CSS：

#outer { 
    height: 400px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 

#outer[id] { 
    display: table; 
    position: static; 
} 

#middle { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
} /* for explorer only */ 

#middle[id] { 
    display: table-cell; 
    vertical-align: middle; 
    position: static; 
} 

#inner { 
    position: relative; 
    top: -50%; 
    text-align: center; 
} /* for explorer only */ 

#inner { 
    margin-left: auto; 
    margin-right: auto; 
} 

div.greenBorder { 
    border: 1px solid green; 
    background-color: ivory; 
}

HTML

<div id="outer" class="greenBorder"> 
    <div id="middle"> 
     <div id="inner" class="greenBorder"> center 

     </div> 
    </div> 
</div>

http://jsfiddle.net/3NjUF/4/

これは40ピクセルの高さである： http://jsfiddle.net/3NjUF/5/

出典

2011-02-02 21:44:36 ngen

あなたはマージンの巧妙なトリックを使用することができます。 0自動;を使用して、div内のコンテンツを中央に揃えます。次のコードは正常に動作する必要があります。この場合、

HTML：

<div style="height:40px;"><span>Personal Information</span></div>

CSS：

span 
    { 
     width: 50%; 
     margin: 20px auto; 
     text-align: center; 
     display:block 
    }

出典

2016-09-09 10:17:58

divの上端と下端の間にテキストを配置するにはどうすればよいですか？

答えて

関連する問題