相关疑难解决方法(0)

Mac/PC上的字体渲染/线高问题(元素外)

该设计

信息小部件内容应在中间垂直对齐,如下所示:

原创PSD设计


编码设计

Windows:Chrome 20/FF 14/IE 9

Windows编码设计

Mac(Lion/Mt. Lion):Chrome/FF

Mac编码设计


代码

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->
Run Code Online (Sandbox Code Playgroud)

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle; …
Run Code Online (Sandbox Code Playgroud)

html css vertical-alignment css-tables

59
推荐指数
5
解决办法
3万
查看次数

标签 统计

css ×1

css-tables ×1

html ×1

vertical-alignment ×1