HTML / CSS垂直对齐无线电旁边的两行(HTML / CSS Vertical align two lines next to radio)

HTML / CSS垂直对齐无线电旁边的两行(HTML / CSS Vertical align two lines next to radio)

我试图将两条线对齐到单选按钮的中间，如下所示。

使用CSS实现这一目标的最佳方法是什么？ 我可以排在最前面，但底线是超级顽固的。 我试图不使用无线电，如果可能的话，因为它正在使用jquery插件进行重新设计。

谢谢你的帮助！

编辑：这是我一直在使用的代码：

<div> <input id="method-{{Description}}" type="radio" name="project[shipping-method]" value="{{Description}}" /> <label for="method-{{Description}}" class="pb-shipping-method-label">{{Description}} ({{DeliveryTime}}) <span>{{Price}}</span></label> </div>

I'm trying to have two lines aligned to the middle of a radio button, shown below.

What is the best way to achieve this with CSS? I can line up the top line but the bottom line is super stubborn. I'm trying not to float the radio, if possible, as it is being restyled using a jquery plugin.

Thanks for your help!

EDIT: here's my code that I've been working with:

<div> <input id="method-{{Description}}" type="radio" name="project[shipping-method]" value="{{Description}}" /> <label for="method-{{Description}}" class="pb-shipping-method-label">{{Description}} ({{DeliveryTime}}) <span>{{Price}}</span></label> </div>

最满意答案

两个div，一个拿着收音机，一个拿着文字。 将radio div的line-height设置为等于text div的height 。 还要在收音机本身添加vertical-align:middle 。

这是一个演示： http ： //jsfiddle.net/AlienWebguy/JffCD/

Two divs, one holding the radio and one holding the text. Set the line-height of the radio div to equal the height of the text div. Also add a vertical-align:middle to the radio itself.

Here's a demo: http://jsfiddle.net/AlienWebguy/JffCD/