css - 如何重新对齐 a 中的文本？

Question

我有一个图像，然后是水平文本，然后是图像，然后是文本。我希望文本更高，但margin-top不适用于跨度。

这是我的代码（忽略 {} 括号中的位，这些是用于 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;
}

试试看。

Answer 2

的使用ul li是更好的选择。您可以根据需要轻松放置内容。

请给float:left所有内部内容，之后您可以轻松地使用这些margin值。