1

CSS の垂直方向の中央揃えは最初は面倒ですが、もう少し複雑にしました。私のページには、次のものがあります。

<ul id="complete">
</ul>

<form id="new_item_form">
  <input type="text" id="add_item" placeholder="Type some tasks here"/>
</form>

<ul id="incomplete">
</ul>

これは、基本的なタスク リスト用です。タスクは不完全な ul に追加され、完了すると完全な ul に移動します。私が css を介してやりたいことは、テキスト フィールドをページの垂直方向の中央に配置し、そこに留まり、2 つのリストを突き合わせることです。私はあらゆる種類の垂直方向の配置を見てきました (ここにあるフォームの要約: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ ) が、方法を見つけることができないようです必要なものを許可するために適応する方法を理解できること。このスタイルの固定位置センタリングをどのように達成しますか?

編集: ここに私が探しているものの画像があります: https://www.dropbox.com/s/i0oit3v84j93b5g/Screen%20Shot%202012-10-11%20at%204.27.16%20PM.png

4

3 に答える 3

2

これはあなたが手に入れたいものですか？

もちろん、私のコードは少し大雑把です (tds での高さ属性の使用! あまり叱らないでください)。しかし、あなたは要点を理解します。

テーブルの高さが不明でも固定でもなく、親の高さがわかっている場合、それは機能せず (この例を参照)、分解する必要があります。

高さが全くわからないと、ちょっと合わせにくいですよね…。

vertical-align に関する詳細情報

于 2012-10-11T20:50:36.083 に答える
1

CSS でこれを行う方法は思い浮かびませんが、JavaScript/jQuery を使用するとかなり簡単に行うことができます。これは、ドキュメントのロード時に必要なことを実行するjsFiddleです。もちろん、リストを変更した場合は、コードを再度呼び出します。

まず、リストとフォームを div で囲みます。これを id="cmiddle" と呼びました。次に、CSS を使用して cmiddle div を position: relative として設定します。次に、JavaScript コードを使用して囲んでいるウィンドウまたはフレームの高さを取得し、フォームの中心を計算してから、上部リストの高さを引いて正しい div 位置を取得します。

$(document).ready(function(e) {
    // To work with frames, too
    function getParentDocHeight($ele) {
        for (;;) {
            if (!$ele || !$ele.length) {
                return $(window).height();
            }
            $ele = $ele.parent();
            if ($ele.is("frame") || $ele.is("window")) {
                return $ele.height();
            }
        }
    }
    var $cm = $("#cmiddle");
    var formHeight = $("#new_item_form").outerHeight();
    var viewHeight = getParentDocHeight($cm)
    var formTop = (viewHeight - formHeight) / 2;
    var divTop = formTop - $("#complete").outerHeight();
    $cm.css("top", divTop);
});

編集: Kraz は、リスト アイテムを両方のリストに追加し、コードを再度呼び出して再計算するシミュレーションを追加するのに十分でした。彼のjsFiddle here。

于 2012-10-11T20:59:37.040 に答える
0

うーん、何を言っているのかわからない

ただし、一般的には、line-height = div の高さを設定します。必要に応じて、その周りに div を作成します

非常に特殊な状況の場合、手動で中央に配置するために計算を行います

したがって、1 つのものを中央に配置する場合は、div を作成し、それを line-height = div の高さで囲んでから、div の位置を絶対、幅、高さなどにします。

お役に立てれば

于 2012-10-11T20:23:39.567 に答える