Блог

На самом деле это не форма заказа (пока), но я думаю, что это лучше всего описывает ее. Я хочу создать сетку из 3 встроенных изображений, затем текст под каждым, затем повторять бесконечно. Я попытался превратить каждую строку в уникальную таблицу, но выравнивание стало проблемой. Затем я попытался создать одну таблицу и присвоить уникальным классам image и text < tr >, но у меня возникли проблемы с уменьшением высоты текстовых строк до более эстетичного размера, а также с центрированием текста под изображением. Я попытался сделать это искусственно, используя столько «amp; nbsp», сколько было необходимо, но затем текст начал переноситься на новую строку, и это все испортило. Ниже приведен код и ссылка на 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>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; acorn squash, golden beets, pistachios</p></td>
    <td class="text"><p>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; roasted eggplant, herbed ricotta, sumac</p></td>
    <td class="text"><p>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
   </tr>
  

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

(Кстати, я новичок в stackoverload, поэтому, если есть какой-либо протокол, которому я не следую в отношении публикации, я был бы благодарен за любые советы / предложения. Спасибо!)

Взгляните на это: 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 , и т. Д. На классы, состоящие из одного и того же слова / буквы, только другого номера, для лучшей читаемости. (Это также может быть идентификатор, кстати, главное — использовать равные термины только с одним отличием)

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 to Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade to Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade to Order/IMG_1992_zps1b881869.jpg");}
  

• В вашем CSS я удалил все повторяющиеся объявления и объединил их в один перекрывающийся класс. Теперь только фоновое изображение имеет отдельное правило для каждого отдельного элемента.
• Я удалил пару правил, которые вам не нужны (и, вероятно, добавлены в неудачной попытке оформить таблицу по своему вкусу).
• В начале я добавил два правила: table и td . Это два общих класса, которые я всегда помещаю в начало своего CSS, ничего страшного, если вы позже перепишете некоторые из них другими правилами, это просто гарантирует, что браузер не будет делать никаких проблем.
• Я поместил всю таблицу в a div , чтобы показать вам, как указать размер таблицы (но обратите внимание, что высота все равно больше, чем 400px я ей дал).

• Обратите внимание на text-align:center; и vertical-align: middle; в td правиле. Они освещают ваш текст по горизонтали и вертикали. (Ответ на ваш главный вопрос)

• ВАЖНО: vertical-align:middle; работает только с таблицами, никаких других элементов. Имейте это в виду!

О вашей первой проблеме:
«… проблемы с уменьшением высоты строк текста до более эстетичного размера …»

К сожалению, это свойство таблицы: она будет формироваться в соответствии с содержимым и пространством, которое она занимает на странице. Он заполнит каждый полученный дюйм и автоматически растянется, чтобы соответствовать содержимому. Вы НЕ МОЖЕТЕ (насколько я знаю) ограничить размер одной строки таблицы.

Единственным решением было бы поместить таблицу в div и ограничить высоту div так, чтобы вся таблица была сжата вместе, и даже тогда я не мог бы точно сказать вам, как будет вести себя таблица.. вы загоняете его в крошечный уголок, и никто не знает, что он будет делать:)