0

親要素「.person」の中央に垂直になるように、div「.person-user」を垂直方向に配置したいと思います（写真の中央にあるが右側にあるテキスト）これを行うにはどうすればよいですか？ ？

ありがとう

http://jsfiddle.net/mpBW5/5/

4

4 に答える 4

1

これは単純なはずですが、実際には裏側で行うのが面倒です。これは、人divのdisplay：tableと、画像ラッパーとinfo divのdisplay：table-cellを使用した簡単なjsFiddleです。

http://jsfiddle.net/2yfDs/1/

于 2012-10-10T15:47:03.977 に答える
1

以下は、 JavaScriptとJQueryを使用せずに、必要なことを正確に実行するマークアップとスタイルの組み合わせです。

マークアップ：

<div class="person">
    <img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
    <div class="profile">
        <div class="name">Colin Pacelli</div>
        <div class="fact">Ohio University</div>
    </div>
</div>​​​​​​​

スタイル：

.person {
    display: table;
}

.person img.profile{
    height: 50px;
    margin-right: 10px;
    /*border-radius: 4px 4px 4px 4px;*/
}

.person div.profile {
    display: table-cell;
    vertical-align: middle;
    /*font-family: calibri;
    font-size: 14px;
    color: #444;*/
}

/*.person .profile .name {
    font-weight: bold;
}*/

私は、主にソリューションに影響を与えないルールをコメントアウトしました。これにより、正しく実行された場合にCSSがどれだけ必要かをすべての人が理解できるようになります。仮想マシン上で実行される32Kbのクライアント側コードを使用して実行される10行のコードと比較して。そして、あなたはAdobeFlashPlayerが悪だと思った。私はJQueryをあまり気にしませんが、特にそれがうまくいくことについては、率直に言って、純粋なスタイルの明確なケースにJQueryを含めることは少し多すぎます。

おそらくお分かりのように、私はあなたのJSFiddleを編集し、本質的でないものを取り除き、ビジュアルをそのままにして、望ましい動作を示す最小限の例に切り詰めました。

タグとして指定htmlしたのでcss、ほとんどの場合、回避できる場合はJavaScript / JQueryに頼らないほうがよいので、代わりに上記のようなマークアップとスタイルのソリューションを使用します。

于 2012-10-10T18:39:53.750 に答える
0

これは非常に一般的な質問であり、これまでのところ最良の説明はここにあります。

http://phrogz.net/css/vertical-align/index.html

于 2012-10-10T15:40:17.230 に答える
0

最も正確な方法は、jQueryを使用してこれを行い、各divに対して動的に計算することです。これは、一部/すべての画像/テキストdivの高さが異なる場合に役立ちます。例。_ コード：

$("div.person-user").each(function() {
    $(this).css("marginTop", function() {
        var imgH = $(this).prev("div.person-user-pic").height(),
        thisH = $(this).height(),
        h = (imgH/2) - (thisH/2);
    return h;
    });
});​

ただし、すべてのdivと画像の高さが同じである場合は、次のようにすることができます。

div.person-user {margin-top: 8px;}

これがあなたの質問に答えることを願っていますか？

于 2012-10-10T18:07:29.427 に答える