如何在右侧对齐嵌入块元素？

正如你可以看到在下面的小提琴：http://jsfiddle.net/EvWc4/3/，我目前正在寻找一种方法来对齐第二个链接（link-alt）到其父（p）的右侧。如何在右侧对齐嵌入块元素？

为什么不使用浮点数或位置：绝对的你会说，主要原因是我喜欢这样的事实，即链接的显示（内联块）属性允许它们以自然方式垂直排列。

通过使用float或position：absolute;我将被迫计算并放置一些额外的边距或顶部值来垂直对齐链接。

这里是代码，但更清楚地看到小提琴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; }

来源

2012-02-08 inwpitrust

为什么你会被迫计算任何东西？向右浮动并给它们相同的填充。 – thenetimp 2012-02-08 22:41:51

太容易了，我之前没有提到的一个约束是，即使我的链接没有相同的填充，我也想保留默认的垂直对齐（中间）。 – inwpitrust 2012-02-08 22:55:10

你是否乐意使用CSS3，还是需要旧的IE支持？ – Petah 2012-02-08 23:05:16

要使用CSS3做到这一点，你可以使用Flex盒模型

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/

来源

2012-02-08 23:24:05 Petah

谢谢:)我认为使用新的CSS3 Grid Alignement模块也可以实现相同的结果http://msdn.microsoft.com/library/hh673536.aspx#grid_alignment（ie10 only only） – inwpitrust 2012-02-08 23:33:55

IE 10还应该支持弹出框虽然。 – Petah 2012-02-08 23:50:06

这个答案在当时是正确的，但现在已经过时，你应该使用新的弹性盒规格https://developer.mozilla.org/en/docs/Web/CSS/flex – nickspiel 2015-07-23 04:17:50

属性float对元素的垂直定位无关。

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

应该完成你正在寻找的东西。将父项的溢出设置为默认（可见）以外的东西将强制它像普通元素一样处理浮动子项。

Reference article

来源

2012-02-08 22:44:03

它不：http://jsfiddle.net/EvWc4/14/随着浮动，我失去了我美丽的默认垂直对齐：中; – inwpitrust 2012-02-08 22:49:31

将父元素的溢出设置为除了可见之外的东西。编辑答案反映。 – 2012-02-08 23:03:16

我知道浮动元素被从流中取出。这不是我试图解决的问题的一部分。但感谢您的帮助。 – inwpitrust 2012-02-08 23:16:12

您可以设置position到absolute和使用right: 0

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

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

来源

2012-02-08 22:44:47 Petah

感谢您的回复，但通过此解决方案，我如何获得链接垂直对齐？（middle，top，baseline，...） – inwpitrust 2012-02-08 22:57:46

使用'top'或'bottom'属性，http://jsfiddle.net/EvWc4/16/ – Petah 2012-02-08 23:02:53

我们正在摆脱这里的主要问题。我试图保持链接在它们之间垂直对齐（不考虑它们各自的高度）。感谢您的帮助 – inwpitrust 2012-02-08 23:19:39

我没有测试过这在所有外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; 
}

来源

2013-04-05 06:11:24

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

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

来源

2013-04-22 07:45:42

CSS3 Flex和电网项目都应该解决这些问题，但标准的支持仍然参差不齐作为2013年

回到现实世界。我不认为这是纯粹在CSS2中完成的。1（IE8 +）没有像素黑客。事情是，文本对齐由父元素控制，并且由于两个锚共享它们的父元素，所以它们都对齐到左侧或右侧。并且在最后一行上证明不起作用。

如果你可以承受一点点额外的HTML，有两种做法：

1）添加是保证包裹行，然后试图隐藏空行另一个内联。这允许您在父级上使用文本对齐对齐。

<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高度不会对你有帮助），你将不得不摆弄边距或什么否则，以使其真正起作用。进一步讨论：How do I *really* justify a horizontal menu in HTML+CSS?

2）在锚标签的顶部添加另一层嵌入块，并将其大小设置为50％。然后，您可以应用单独的文本对齐来获取您请求的最终布局。在两个内嵌块之间不允许有空白，这两个内嵌块的大小为50％，否则您将包装该行。优点：在不污染外箱模型的情况下生成您要求的确切布局。

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

来源

2013-06-08 04:32:26

我相信这实现你在找什么：

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

来源

2013-10-11 00:37:16

真棒工作，对我来说！） – Michael 2016-04-06 13:23:15

如何在右侧对齐嵌入块元素？

回答

相关问题