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

Question

I have an image, followed horizontally by text, followed by an image, followed by text. I want the text to be higher, but margin-top doesn't work with span.

Here's the code I have (and ignore the bits in the {} brackets, those are things for use in tumblr custom themes):

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

I'd change it all over to but that would make each one appear on a new line.

Answer 1

Whoa there. Your CSS should follow the HTML, not the other way around. First mark it up semantically. It looks like you have a list, so let's use an ul :

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

Then you can float your list items to the left:

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

You can also float your image to the left:

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

Then you can align the text to the center:

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

Try it.

Answer 2

Usage of ul li is the better option. You can easily place the content as of your wish.

Please give float:left to all the inner contents, after that you can easily play with the margin values.