【问题标题】:how to vertically align figcaption to img in figure如何将figcaption垂直对齐到图中的img
【发布时间】:2013-09-09 07:28:25
【问题描述】:

figcaption 的文字如何与图中的图像垂直对齐。

见:http://jsfiddle.net/YdATG/1/

HTML

<section class="links">
   <a href="#">
    <figure class="grid-parent clearfix">
            <figcaption class="grid-80 push-20 fontEmphazie">foo</figcaption>
            <img alt="Foto" src="http://www.google.com/intl/de/homepage/images/google_favicon_64.png" class="grid-20 pull-80 grid-no-pad-left grid-no-pad-right">
    </figure>
   </a>
   <a href="#">
    <figure class="grid-parent clearfix">
                <figcaption class="grid-80 push-20 fontEmphazie">bar</figcaption>
                <img alt="Foto" src="http://www.google.com/intl/de/homepage/images/google_favicon_64.png" class="grid-20 pull-80 grid-no-pad-left grid-no-pad-right">
    </figure>
   </a>
</section>

CSS

section.links figure, section.links figure {
    background-color: #f3f3f3;
    padding: 0.5em;
    margin-bottom: 1em;
}

section.links figure {
    margin-top: 1em;
}

section.links figcaption, section.links figcaption {
    padding: 0 0.5em;
}

section.links a, section.links a {
    font-size: 0.9em;
    color: #000;
}

【问题讨论】:

标签: html css image alignment figure


【解决方案1】:

我会说

figure {
    display: table;
}

figure a {
    display: table-cell;
}

figcaption {
    vertical-align: middle;
}

假设图片决定了链接的大小。

【讨论】:

  • 我在第一个小提琴中放错了ankor,对不起
  • 好的,这部分工作,但现在一切都不再响应了:jsfiddle.net/YdATG/7 ...啊我不明白这个表的东西:/
  • vertical-align 是为了在表格中使用(也可能在其他一些东西中),这就是你必须将父元素作为表格和表格单元格。
  • 确实有另一张桌子在它周围,但这似乎不是问题,我只是不知道如何让它全宽:jsfiddle.net/YdATG/8 否则你的答案将是最好的一个
  • 虽然表格单元格令人头疼。你试过宽度:100%; ?
猜你喜欢
  • 2019-05-04
  • 2013-07-23
  • 2012-06-19
  • 1970-01-01
  • 2014-10-27
  • 2013-05-17
  • 1970-01-01
  • 1970-01-01
  • 2011-12-18
相关资源
最近更新 更多