Question

我有一张图片，后面是文字，后面是图片，后面跟着文字。我希望文本更高，但margin-top不适用于span。

这是我的代码（并忽略{}括号中的位，这些是在tumblr自定义主题中使用的东西）：

<div class="activities">
    <span class="activity"><img src="{image:First Activity Image}"/>
        <span class="activityname">{text:First Activity Name}</span>
    </span>
    <span class="activity"><img src="{image:Second Activity Image}"/>
        <span class="activityname">{text:Second Activity Name}<span>
    </span>
</div>

我会改变它，但这会使每一个都出现在新的一行。

Answer 1

哇那里。你的CSS应该遵循HTML，而不是相反。首先在语义上标记它。看起来你有一个列表，所以让我们使用ul：

<ul class="activities">
    <li>
        <img src="...">
        <p>...</p>
    </li>
    ...
</ul>

然后您可以将列表项浮动到左侧：

.activities {
    /* makes sure the container expands to fit the floated material */
    overflow: hidden;
}
.activities > li {
    float: left;
    width: 300px;  /* or something; you might want to change this number */
}

您还可以将图像浮动到左侧：

.activities > li {
    overflow: hidden;  /* again, expand the container */
}
.activities > li > img {
    float: left;
}

然后您可以将文本与中心对齐：

.activities > li > p {
    text-align: center;
}

<强> Try it.

Answer 2

使用ul li是更好的选择。您可以根据自己的意愿轻松放置内容。

请将float:left提供给所有内容，之后您可以轻松使用margin值。

如何在<span>？</span>中重新对齐文本

2 个答案: