web-dev-qa-db-ja.com

インラインブロック要素を右に揃える方法は？

次のフィドルで見ることができます： http://jsfiddle.net/EvWc4/3/ 、私は現在2番目のリンク（link-alt）を右側に揃える方法を探していますその親（p）の。

なぜfloatまたはposition：absoluteを使用しないのか、主な理由は、リンクの表示（インラインブロック）プロパティにより、自然な方法で垂直に整列できるという事実が好きだからです。

Floatまたはposition：absoluteを使用することにより、リンクを垂直方向に配置するために、余分なmargin-topまたはtop値を計算して配置する必要があります。

コードは次のとおりですが、Fiddle http://jsfiddle.net/EvWc4/3/ をご覧ください。

    <p>
        <a href="#" class="link">link</a>
        <a href="#" class="link link-alt">link alt</a>
    </p>

    p {
       padding: 20px;
       background: #eee;
    }
    .link {
       display: inline-block;
       padding: 10px;
       background: #ddd;
    }
    .link-alt { padding: 20px; }
vertical-alignmentcss
16
inwpitrust

CSS3でこれを行うには、フレックスボックスモデルを使用できます

HTML：

<div class="content">
    <div class="box box1"><a>Link 1</a></div>
    <div class="box box2"></div>
    <div class="box box3"><a>Link 2</a></div>
</div>

CSS：

.content {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
.box2 {
    box-flex: 1;
}

（ベンダープレフィックスが必要）

http://jsfiddle.net/EvWc4/18/

9
Petah

CSS3フレックスおよびグリッドアイテムはこれらの問題に対処することになっていますが、2013年の時点で標準サポートはまだ不安定です。

現実の世界に戻りましょう。ピクセルハッキングなしでCSS2.1（IE8 +）でこれを純粋に行うことは不可能だと思います。つまり、テキストの配置は親要素によって制御され、2つのアンカーは親を共有するため、両方とも左または右に配置されます。そして、正当化は最後の行では機能しません。

HTMLを少し追加する必要がある場合は、2つのアプローチがあります。

1）行を折り返すことが保証されている別のインラインを追加し、空の行を非表示にします。これにより、親でtext-align justifyを使用できます。

<p>
    <a href="#" class="link">link</a>
    <a href="#" class="link link-alt">link alt</a>
    <span class="boom"></span>
</p>

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
        text-align: justify
    }

    .link {
        display: inline-block;
        padding: 10px;
        background: #ddd;
    }

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        height: 0;
        width: 100%
    }
</style>

長所：2つだけでなく、任意の数のインラインブロックで動作します。ほんの少し余分なHTMLが必要です。

短所：テキストの最後の（空の）行を非表示にするために余分な労力がかかります（その中のインラインブロックを高さ0に設定しても役に立ちません）。本当に機能します。詳細な説明： HTML + CSSで水平メニューを*本当に*正当化するにはどうすればよいですか？

2）アンカータグの上にインラインブロックの別のレイヤーを追加し、それらを50％にサイズ変更します。次に、個別のtext-alignを適用して、要求した最終レイアウトを取得できます。 50％のサイズの2つのインラインブロックの間に空白を入れないでください。そうしないと、行が折り返されます。

<p>
    <span class="left">
        <a href="#" class="link">link</a>
    </span><span class="right">
        <a href="#" class="link link-alt">link alt</a>
    </span>
</p>

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
    }

    .link {
        display: inline-block;
        padding: 10px;
        background: #ddd;
    }

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        width: 50%
    }

    .left {
        text-align: left
    }

    .right {
        text-align: right
    }
</style>

長所：外部ボックスモデルを汚染することなく、要求した正確なレイアウトを生成します。

短所：2つのインラインブロックでのみ機能します（拡張を試みることはできますが、すぐに非常に複雑になります）。余分な空白がないため、適切にフォーマットされたマークアップが危険にさらされる可能性があります。

9
Daniel S.

positionをabsoluteに設定し、right: 0

.wrapper {
    position: relative;
}
.right {
    position: absolute;
    right: 0;
}

http://jsfiddle.net/EvWc4/13/

5
Petah

私はこれがあなたが探しているものを達成すると信じています：

.link-alt {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    margin: auto;
    max-height: 1em;
}

position: absoluteおよびright: 0を使用して、正しい配置を取得できます。垂直方向の中央揃えを維持するには、top: 0; bottom: 0; margin: auto;を使用できます。もちろん、要素の高さも設定する必要があります。そうしないと、要素の最大の高さまで伸びます。

Jfiddleは次のとおりです。 http://jsfiddle.net/pHppA/

4
James Duffy

Pethasの例を更新したので、純粋なCSS2で実行できます。 IE7では動作しません。使用するdisplay: table-cell;をサポートしていないためです。

http://jsfiddle.net/EvWc4/133/

2
curly_brackets

属性floatは、要素の垂直方向の位置には影響しません。

p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}

あなたが探しているものを達成する必要があります。親のオーバーフローをデフォルト（可視）以外の何かに設定すると、フローティングチャイルドを通常の要素のように扱うように強制されます。

参考記事

1
Will P.

私はこれをChrome以外ではまったくテストしていないので、IEには向かないかもしれません。

このシンプルな（そして限定的な）ソリューションは、text-align: rightおよびwidth: 50%整列された子、およびwhite-space: nowrapは、目的の結果を達成するために親で。

例： http://jsfiddle.net/erikjung/ejcJZ/

.vertically-centered-module {
    white-space: nowrap;
}

.vertically-centered-module > * {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.vertically-centered-module > :last-child {
    text-align: right;
}
0
Erik Jung