logo标签列表

如何将内联块元素右对齐？

vertical-alignmentcss
16

如您所见，在以下 Fiddle 中：http://jsfiddle.net/EvWc4/3/，我正在寻找一种将第二个链接（link-alt）对齐到其父元素 (p) 右侧的方法。

你可能会问，为什么不使用 float 或 position:absolute？主要原因是我喜欢链接的显示方式（inline-block 属性），它们可以在垂直方向上自然地对齐。

如果使用 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; }
为什么你会被迫计算任何东西？向右浮动并给它们相同的填充。 - thenetimp
太容易了，我之前没有提到的一个限制是，即使我的链接没有相同的填充，我仍希望保持默认的垂直对齐方式（居中）。 - inwpitrust
你是否乐意使用CSS3，还是需要支持旧版IE？ - Petah
我真的是！实际上，我出于好奇才问这个问题。 - inwpitrust
7个回答
9
要用CSS3实现这个功能，可以使用flexbox模型。
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/

谢谢 :) 我认为可以使用新的CSS3网格对齐模块(http://msdn.microsoft.com/library/hh673536.aspx#grid_alignment)来实现相同的结果(只适用于ie10)。 - inwpitrust
IE 10也应该支持flex box。 - Petah
6
这个答案在过去是正确的，但现在已经过时了，你应该使用新的flex-box规范。https://developer.mozilla.org/en/docs/Web/CSS/flex - nickspiel
9
CSS3的flex和grid可以解决这些问题，但截至2013年，标准支持仍然不稳定。回到现实世界，如果没有像素hacks，我认为纯CSS2.1（IE8+）无法实现这一点。问题在于文本对齐由父元素控制，而由于两个锚点共享其父级，它们要么都靠左对齐，要么都靠右对齐，而justity并不能用在最后一行。如果您可以忍受一些额外的HTML，则有两种方法：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>

优点：适用于任意数量的内联块，而不仅仅是两个。只需要一点额外的HTML。

缺点：需要额外的努力来隐藏最后（空）文本行（将内联块设置为0高度不会帮助您），而且您将不得不调整边距或其他内容才能使其真正起作用。更多讨论：如何在HTML+CSS中*真正*对齐水平菜单？

2) 在锚标记上方添加另一层内联块，并将它们大小调整为50%。然后，您可以应用单独的文本对齐以获得所请求的最终布局。重要的是，不允许两个大小为50％的内联块之间存在空格，否则您将换行。

<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>

优点：可以按照你所请求的确切布局而不会污染外部盒模型。

缺点：只适用于两个内联块（你可以尝试扩展它，但很快就变得非常复杂）。依赖于没有额外的空格，这可能会危及你精美格式化的标记。

5

您可以将position设置为absolute，并使用right: 0

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

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

谢谢您的回复，但是使用这个解决方案，我如何使链接垂直对齐？（居中、顶部、基线等） - inwpitrust
我们正在偏离主要问题。我试图让链接在它们之间垂直对齐（不考虑它们各自的高度）。感谢您的帮助。 - inwpitrust
@inwpitrust，你不会找到一种优雅的方式来做这件事，并支持IE。请查看我的CSS3答案。 - Petah
4
我相信这可以满足您的需求：
.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;。当然，您还需要为元素设置高度，否则它将拉伸到其父元素的完整高度。
这是一个示例：http://jsfiddle.net/pHppA/。
2

我已经更新了Pethas的示例，这样就可以在纯CSS2中完成。它在IE7中不起作用，因为它不支持我使用的display: table-cell;。

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

1

float属性对元素的垂直定位没有影响。

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

应该可以实现你想要的效果。将父元素的溢出设置为除了默认值（visible）之外的任何值，都会强制它像处理普通元素一样处理浮动子元素。

参考文章

2
它不会：http://jsfiddle.net/EvWc4/14/ 使用浮动，我失去了美丽的默认垂直对齐方式：middle; - inwpitrust
将父元素的溢出设置为除visible以外的其他值。已编辑答案以反映此更改。 - Will P.
1
我知道浮动元素会脱离文档流。但这并不是我要解决的问题所在。非常感谢你的帮助。 - inwpitrust
这不是重点。重点是它可以在没有任何计算的情况下实现你所描述的功能。http://jsfiddle.net/EvWc4/17/ - Will P.
2
是的，但是你如何使第一个链接与第二个垂直对齐（居中）？ - inwpitrust
0

我在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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接