如何在图像下放置 figcaption

Question

我正在尝试将我的 figcaption 放在 img 下。我不知道为什么它会向右移动。我在页面上还有其他图片，它们的标题没有向右显示，而是在图片下方，但在这张图片上，它不在下方，而应该在下方。有人可以帮助我吗？

这是我的 HTML 代码部分：

 figure{
        margin: 0;
    }

    #fig_moje_slike{
        font-size: 9px;
        text-align: left;
        width: 50%;
        margin: 0;
    }

    #sadrzaj{
        display: inline-block;
        margin: 3em auto;
    }

    #sadrzaj ul{
        display: block;
        float: left;
    }

    #sadrzaj ul li{
        margin: 15px 0;
    }

    #slika_mene{
        width: 14%;
        height: auto;
        display: block;
        float: left;
    }

<section id="sadrzaj">
            <aside>
                <figure>
                    <img src="slike/ja.jpeg" alt="slika mene" id="slika_mene">
                    <figcaption id="fig_moje_slike">Moja slika</figcaption> 
                </figure>
            </aside>
            <ul>
                <li>bla bla</li>
                <li>bla bla</li>
                <li>bla bal</li>
                <li>blabla</li>
            </ul>
        </section>

结果图片： http://imgur.com/a/XXgsP

Answer 1

#slika_mene放一个float:left。这是一个错误。将 float:left 交给 figure.

figure {
  margin: 0;
  float: left;
}

#fig_moje_slike {
  font-size: 9px;
  text-align: left;
  width: 50%;
  margin: 0;
}

#sadrzaj {
  display: inline-block;
  margin: 3em auto;
}

#sadrzaj ul {
  display: block;
  float: left;
}

#sadrzaj ul li {
  margin: 15px 0;
}

#slika_mene {
  width: 14%;
  height: auto;
  display: block;
  /*
  float: left;
*/
}

<section id="sadrzaj">
  <aside>
    <figure>
      <img src="http://beerhold.it/600/600" alt="slika mene" id="slika_mene">
      <figcaption id="fig_moje_slike">Moja slika</figcaption>
    </figure>
  </aside>
  <ul>
    <li>bla bla</li>
    <li>bla bla</li>
    <li>bla bal</li>
    <li>blabla</li>
  </ul>
</section>

Answer 2

你在 slika_mene 上放了一个 float:left。所以如果你删除这个属性它会在你的 img

下

Answer 3

我知道了，只需在 #fig_moje_slike id 上使用 clear:left; 像这样

#fig_moje_slike{
    font-size: 9px;
    text-align: left;
    width: 50%;
    margin: 0;
    clear:left;
}

Answer 4

从 img 和 figcaption 标签中删除 float: left。而是将 float 用于 aside 并根据 width，将其用于 aside

https://jsfiddle.net/Ls6coLb7/3/ 这是更新后的 fiddle

Answer 5

你不需要对图片进行样式化，也不应该，因为在那之后，如果你改变它，你必须再次对它进行样式化，所以样式化更好<figure>，你不需要完全使用 float，从图片中删除 id 并将样式添加到 figure

这是例子，把width放到你想要的任何地方

并将其添加到 img 标签

figure{
  width: 30%;
  height: auto;
  display: inline-block;
  margin-left:100px;
}
img{
  width:100%;
  height:auto;
}

Answer 6

从#fig_moje_slike

中删除clear:left

HTML:

        <figure>
            <img src="http://placehold.it/120x120" alt="slika mene" id="slika_mene">
            <figcaption id="fig_moje_slike">Moja slika</figcaption> 
        </figure>

CSS:

#fig_moje_slike{
font-size: 9px;
text-align: left;
width: 50%;
margin: 0;
}

Answer 7

只需在 #fig_moje_slike id 上使用 clear:left; 我认为它会起作用

如何在图像下放置 figcaption

How to position figcaption under the image

html

css

image

css-position

figure