CSS writing-mode与图片text-align:center垂直居中实例页面

展示

代码

• HTML：

  <strong>默认流</strong>
  <div class="box">
      <img src="mm1.jpg">
  </div>
  
  <strong>垂直流</strong>
  <div class="box verticle-mode">
      <img src="mm1.jpg">
  </div>

• CSS：

  .box {
      width: 300px; height: 240px;
      background-color: #f0f3f9;
      
      text-align: center;
  }
  
  .verticle-mode {
      writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;      
      writing-mode: vertical-rl;
  }