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

回到相关文章 »

代码:

CSS代码:
.box {
    width: 400px; height: 300px;
    background-color: #f0f3f9;
    
    text-align: center;
}

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
    *writing-mode: tb-rl;
}
                
HTML代码:
<strong>默认流-text-align:center水平居中</strong>
<div class="box">
    <img src="mm1.jpg">
</div>

<strong>垂直流-text-align:center垂直居中</strong>
<div class="box verticle-mode">
    <img src="mm1.jpg">
</div>
                

效果:

默认流-text-align:center不居中

垂直流-text-align:center垂直居中