图片垂直居中组件的用法有点迷惑性，容易出错

huanglong-zz commented 10 years ago

图片垂直居中的结构是不是不可以随意调整，如下是：

<div class="center-box" style="height: 500px;background: #f8f8f8;">
  <div class="center-hack"></div>
  <div class="center-img">
    <img width="100%" src="http://cyj.me/assets/img/2013-new-york/IMG_0770.jpg" alt="自由女神像,来自 cyj.me">
  </div>
  <div class="center-body">
    <p>这里若不加 center-body, 会被重置为 font-size: 0 导致字不显示。</p>
  </div>
</div>
<p>（栅格、常用布局解决方案、如何 Mobile First 等）</p>

会导致外面的文字被遮挡。但愿是我的用法有问题

yisibl commented 10 years ago

抱歉，现在没有文档，后续会说明此种通用模块的具体结构，现在可以参考 emmett-plus 中的三种情况：纯图片，纯文字和图文混排，当然为了避免出错和快速开发，可以直接安装该插件。 https://github.com/yisibl/emmet-plus/blob/master/snippets-emmet-plus.json#L129

cyjake commented 10 years ago

<div class="center-box">
  <b class="center-hack"></b>
  <div class="center-content">
    <div class="center-img"><a href=""><img src="" alt=""></a></div>
    <p>未知高度垂直居中模块</p>
  </div>
</div>

demo 有误， @huanglong 老师改下

cyjake commented 10 years ago

建议安装 @yisibl 老师的 emmet snippet

thx / cube

图片垂直居中组件的用法有点迷惑性，容易出错 #7