如何重新對齊<span>中的文本？

我有一個圖像，水平方向依次顯示文字，然後是圖像，然後是文字。我希望文字更高，但margin-top不適用於span。如何重新對齊<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>

我全去改變它，這將使每一個出現在一個新的行。

來源

2012-10-13 Andrew

嘗試將vertical-align：top放到圖像上，或將它們浮起。 – coopersita

你還可以提供所有類的CSS，你當前的輸出和所需的輸出嗎？ – hjpotter92

哇。你的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; 
}

使用的ul liTry it.

來源

2012-10-13 23:30:21 icktoofay

是更好的選擇。您可以根據自己的意願輕鬆放置內容。

請給float:left所有的內容，然後你可以很容易地玩margin值。

來源

2012-10-13 23:40:36

如何重新對齊<span>中的文本？

回答

相關問題