Question

我的标题中有标题和副标题：

<header>
    <h1>Article Title</h1>
    <p>By John Smith<span class="right">100 likes<img src="http://placehold.it/44x44"/></span></p>
</header>

副标题需要左侧有一个名字，右侧需要有喜欢的数字 - 带有图像。

我希望文字位于图片的垂直中心，以便我使用：

img{
      vertical-align: middle;
}

这适用于类似计数，但不适用于名称。名称如何以相同的垂直对齐方式显示？

Answer 1

如果可以在名称周围添加<span>，请继续阅读。

＆＃13;

span {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}
img {
    vertical-align: middle;
}
.right {
    width: 100%;
    text-align: right;
}

＆＃13;

<header>
    <h1>Article Title</h1>
    <p><span>By John Smith</span><span class="right">204 likes<img src="http://placehold.it/44x44"/></span></p>
</header>

＆＃13;

小提琴演示： http://jsfiddle.net/L4n50f49/

Answer 2

您可以执行列表并将其显示在内联块中：

<ul>
   <li>Name</li>
   <li>Like Counts</li>
   <li><img ... /></li>
</ul>

li
{
display:inline-block
}

Answer 3

试试这个。

创造这种风格 <style> div.LeftColumn { width: 170px; float: left; background-image:url("http://placehold.it/44x44"); } </style>

更改为DIV并指定样式。

<p><div class="LeftColumn">By John Smith  100 likes</div></p>

如果你想要更多的盒子外观，你需要进一步调整，但这会为你提供图像中的文字。

Answer 4

＆＃13;

# Create a Customer
customer = Stripe::Customer.create(
  :source => token,
  :plan => "gold",
  :email => @user.email
)

# Grab the response data from Stripe:
card = customer.sources.first


# Save their Stripe ID:
@user.stripe_customer_id = customer.id

# Save their credit card details:
@user.card_id = card.id
@user.card_brand = card.brand
@user.card_last4 = card.last4
@user.card_expiration = Date.new(card.exp_year, card.exp_month, 1)

＆＃13;

垂直对齐内联文本/图像

4 个答案: