试图将图像和文本组织成一种订单形式

Question

这实际上不是一个订单（到目前为止），但我认为它最能描述它。我想创建一个包含 3 个内联图像的网格，然后在每个图像下方添加文本，然后无限重复。我尝试将每一行变成一个唯一的表格，但对齐成了一个问题。然后我尝试制作一张表格并赋予图像和文本 的独特类，但我无法将文本行的高度缩小到更美观的尺寸，并将文本置于图像下方的中心.我试图用尽可能多的“& nbsp's”人为地做到这一点，但随后文本开始换行，这一切都搞砸了。 js fiddle的代码和链接如下：

<table id="saladGrid">
   <tr class="saladPics">
    <td id="one"></td>
    <td id="two"></td>
    <td id="three"></td>
   </tr>

   <tr class="saladText">
    <td class="text"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; acorn squash, golden beets, pistachios</p></td>
    <td class="text"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; roasted eggplant, herbed ricotta, sumac</p></td>
    <td class="text"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
   </tr>

http://jsfiddle.net/jshweky/5bTW8/

（附带说明，我是 stackoverload 的新手，所以如果我在发帖方面没有遵循任何协议，我将不胜感激任何提示/建议。谢谢！）

Answer 1

看看这个：http://jsfiddle.net/EX9f9/

如果您查看下面的代码，您会注意到以下几点：

HTML

<table id="saladGrid">
    <tr class="saladPics">
        <td class="s1"></td> //I changed your classes 'one','two',etc
        <td class="s2"></td>
        <td class="s3"></td>
    </tr>
    <tr class="saladTxt">
        <td class="txt"><p>acorn squash, golden beets, pistachios</p></td>
        <td class="txt"><p>roasted eggplant, herbed ricotta, sumac</p></td>
        <td class="txt"><p>arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
    </tr>
</table>

• 在您的 HTML 中，为了更好的可读性，我将您的 id 的 one、two 等更改为包含相同单词/字母但数字不同的类。 （那些也可能是 ID 的顺便说一句，重点是使用相同的术语，只有一个微分）

---

CSS

table {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing: 0px;
}
td {
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;
    vertical-align: middle;
}

#saladGrid {
    width: 600px;
    height: 400px;
}
#saladGrid table {
    margin: 0 auto;
    border-spacing: 30px;
}
.saladPics td {
    width: 350px;
    height: 350px;
    background-position: center;
    background-size: 350px 350px;
    background-repeat: no-repeat;
    border-radius: 50px;
}
.saladPics td.s1 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1992_zps1b881869.jpg");}

• 在您的 CSS 中，我删除了所有重复的声明并将它们放在一个重叠的类中。现在，只有 background-image 对每个单独的元素都有单独的规则。
• 我删除了一些您不需要的规则（并且可能是在尝试根据您的喜好设置表格样式失败时添加的）。
• 一开始我添加了两条规则：table 和td。这是我总是在我的 CSS 开头放置的两个通用类，如果你稍后用其他规则覆盖其中的一些，这没关系，这些只是确保浏览器不会做任何时髦的事情。
• 我将整个表格放在div 中，向您展示如何包含表格的大小（但请注意，高度仍然大于我给它的400px）。

• 注意td 规则中的text-align:center; 和vertical-align: middle;。这些会在水平和垂直方向上点亮您的文本。（主要问题的答案）

• 重要提示：vertical-align:middle; 仅适用于表格，不适用于其他元素。请记住这一点！

---

关于您的第一个问题：
“...无法将文本行的高度缩小到更美观的尺寸...”

不幸的是，这是表格的一个属性：它会根据内容和页面上的空间自行形成。它会填满它得到的每一英寸，并会自动拉伸以适应内容。您不能（据我所知）限制表格中一行的大小。

唯一的解决方案是将表格放在一个 div 中并限制 div 的高度，以便整个表格被挤压在一起，即使那样我也无法确定表格的行为.. 你推它在一个小角落里，不知道它会做什么:)