0

HTML 

<div id="divTop">divTop</div>
<div id="divBottom">divBottom
<div id="divCenter">divCenter</div>
</div>

CSS 

html, body{
    height:100%;
}
#divTop{
    height:50px;
    background:#008080;
    color:#ffffff;
    text-align:center;
    vertical-align:middle;
}
#divBottom{
    height:100%;
    text-align:center;
    vertical-align:middle;
    border:thick solid blue;
}
#divCenter{
    width:50vmin;
    height:50vmin;
   border:medium solid red;     
}

私が望む: divCenter水平方向と垂直方向の両方の内側にdivBottom中央揃えし、すべての div 内のテキストを垂直方向に中央揃えにします。
助けてください。

jsfiddleはこちら

4

1 に答える 1

1

こんにちは SunSky 私はあなたのフィドルをフォークしてこれを作りましtransformationた。プロパティを使用してテキストを回転させることができます。これは、Webkit ブラウザー、mozilla、opera、および IE9 で動作するはずです。以前のバージョンの IE では試していませんが、少なくとも IE バージョン 7 および 8 では動作するはずです。このtransformプロパティは、IE 7,8 の場合は <=IE8 を除いて、前述のブラウザで動作します css プロパティwriting-mode:tb-lr;を配置text-orientation:sideways-lr;し、目的の効果を得るためにこれらの古い IE ブラウザーでは。本当に欲しいものを得るには、これらの値をいじる必要があります。必要なポイントに回転させるだけでよいので簡単です。中央に配置したり、ちょうど使用するボックスtransformationsの端から移動したりしたい場合は、使用するボックスを中央に配置し、これらが機能するために必要ですdivCenterpaddingsmargin-left:auto;margin-right:auto;width100% 使用できるように設定します。ここにjsfiddleがあるので、コードを確認できます。また、ここにW3 書き込みモードのドキュメントがあります。他に質問やコメントがある場合は、お気軽に質問/コメントしてください。

編集：

質問を注意深く読んでいませんでしたが、縦書きテキストを作成するためのテキスト変換に関する追加情報として、情報を残しておきます。垂直方向のテキストを中央に配置するには、このリンクを確認できます。垂直方向に整列する方法と、それを行わない方法についてです。最終的な例は、おそらくあなたが探しているものです。それがうまくいかない場合は、Stackoverflow に関するいくつかの質問があります。リンク:

Div 内のテキストを垂直方向に配置詳細情報へのリンクがいくつかあります。

CSS を使用して画像の横にあるテキストを垂直方向に揃えるにはどうすればよいですか? これについては、2番目の回答を確認してください。これは簡単で、必要なものをアーカイブするための良いヒントと方法を提供します。これがお役に立てば幸いです。これがあなたが本当に望んでいたものであることを願っています。これがあなたが望むように動作するはずの最新のjsfiddleheightです。あなたがしなければならないことは、 aを設定して垂直方向に中央に配置し、次にプロパティwidthに50％を配置し、プロパティに中央に配置したいの負の半分を配置することです。この配置をすべてに適用する必要がある場合は、対応するそれぞれの CSS プロパティを使用するか、コードを簡単にするためにクラスを作成します(topmargin-topheightdivdivsdivHTML <div class="foo"></div> CSS .foo{}) これらのプロパティを使用して、テキストを垂直方向に揃える要素に追加するだけです。

于 2013-07-15T17:25:12.693 に答える