Как переместить текст вниз и разместить подпись под картинкой

Question

Я пытаюсь понять, как разместить подпись под рисунком и переместить текст вниз. Я пытаюсь переместить текст, который содержит второй неорганизованный список вниз.

Figcaption с текстом "Сумасшедший ребенок" появляется в правом верхнем углу картинки, под которой он должен быть. Насколько я понимаю, figcaption поможет, хотя я явно что-то делаю не так.

<div class="container">
    <div class="jumbotron">
        <div class="text-center">
            <h1>The Golden Babies of 3 Orchard Lane</h1>
            <p style="font-size: 30px;"><em>The Snady and Baby Maya</em></p>
            <img src="http://oi63.tinypic.com/2ijkend.jpg" alt=" haha, sucks" class="Sandy">
            <figcaption> <em>Snady Babushka</figcaption> </em>
                <font size="5">
                    <ul>
                        <strong> Sandy loved</strong>
                        <li>Her red ball</li>
                        <li>Hiding in her jungle</li>
                        <li> Crossing her paws in an X</li>
                        <li> And most of all her big brother, Jonah </li>
                    </ul>
                </font>
                <br>
        </div>
        <img src="http://oi68.tinypic.com/8yb2f4.jpg" align="left" alt="I'm so sorry you can't see my baby face" class="Maya">
        <figcaption><em>Crazy Baby</figcaption></em>
            <font size="5">
                <ul id="cap">
                    <div class="text-center">
                        <strong>Maya Loves</strong>
                        <li>Tennis balls</li>
                        <li>People more than dogs</li>
                        <li>Greeting someone as they enter the house</li>
                        <li> And of course, her big brother, Jonah</li>
                </ul>
                </div>
            </font>
    </div>
</div>

Answer 1

Не видя ваш CSS, это то, что я бы порекомендовал попробовать. Первое, что я хотел бы сделать, это убедиться, что ваши теги расположены в правильном порядке. В вашем неупорядоченном списке элемент div начинается внутри тега, но заканчивается за его пределами.

  <ul id="cap">
   <div class="text-center">
   <strong>Maya Loves</strong>
   <li>Tennis balls</li>
   <li>People more than dogs</li>
   <li>Greeting someone as they enter the house</li>
   <li> And of course, her big brother, Jonah</li>
 </ul>
 </div>

Должно выглядеть так

 <div class="text-center">
 <ul id="cap">
   <strong>Maya Loves</strong>
   <li>Tennis balls</li>
   <li>People more than dogs</li>
   <li>Greeting someone as they enter the house</li>
   <li> And of course, her big brother, Jonah</li>
 </ul>
 </div>

Затем, что вы можете сделать это с этим div, дать ему определенную ширину, скажем, ширину изображения. Затем поместите изображение и список влево.

 .text-center {
    width: 100px; (Just an example)
 }

 .text-center img,
 .text-center ul {
    float: left;
 }