10

これは一般的な問題であることは承知しており、すでに同様の問題を尋ねています。しかし、今回は解決策を見つけることができませんでした。高さの異なるDIVで、高さの異なるテキストを垂直方向に中央揃えにしようとしています。そして、HTMLに触れずに、CSSだけでこれを解決しようとしています。

例： http: //jsfiddle.net/F8TtE/

 <div id="test">
    <div id="sumup">

        <h1 class="titre">Title</h1>
        <div id="date">hello guys</div>
    </div>
 </div>

私の目標は、そのサイズに関係なく、テキストを垂直方向と水平方向の中央に配置することです。

4

3 に答える 3

19

ここにあります ：

#test {
    text-align:center;
}
#test::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#sumup {
    display: inline-block;
    vertical-align: middle;
}


#test {
    height : 180px;
    text-align:center;
    background: yellow;
}

#sumup {
   	background-color: #123456;
}

#test:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  #sumup {
    display: inline-block;
    vertical-align: middle;
  }
<div id="test">
		<div id="sumup">
			
			<h1 class="titre">Title</h1>
			<div id="date">hello guys</div>
		</div>
</div>

編集: 2015 年になり、ありがたいことに Web が変わりました。廃止されたブラウザーをサポートしていないと仮定すると、Flex モデルで要素を垂直方向に中央揃えにする方が通常は簡単でクリーンです。

#test {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


#test {
    height : 180px;
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#sumup {
   	background-color: #123456;
}
<div id="test">
		<div id="sumup">
			<h1 class="titre">Title</h1>
			<div id="date">hello guys</div>
		</div>
</div>

于 2013-11-05T14:21:54.427 に答える
2

display:table-celldystroyの答えがどのように機能するかよくわからないので、これを使用する別の方法があります。

#test {
    width:100%;
    height : 400px;
    display:table;
}

#sumup {
    width : 100%;

    height : 100%;
    background-color: #123456;
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/F8TtE/3/

于 2013-11-05T14:25:41.403 に答える
0

displayソリューション付きの CSS :

#test {
  display:table; 
}

#sumup {
  display:table-cell; 
}

デモhttp://jsfiddle.net/F8TtE/7/

于 2013-11-05T14:25:42.590 に答える