-1

「display: inline-block」に設定された 2 つの div があり、親 div が両方にラップされ、「text-align: center」が 2 つの子 div を中央に配置しています。

ただし、子 div の上部は垂直方向に整列していません。各子divの行の高さとマージンをいじってみましたが、同じ垂直線に整列しません。

また、中央に配置する必要があるため、左右にフロートさせることもできません。

http://jsfiddle.net/aC5FW/

<div id="parent">
    <div id="child-1">Message Here</div>
    <div id="child-2"><img src="image.jpg"></div>
</div>

CSS:

#parent {
    width: 100%;
    height: 50%;
    text-align: center;
}

#child-1 {
    display: inline-block;
    height: 50px;
    font-size: 12px;
    line-height: 50px;
}

#child-2 {
    display: inline-block;
    height: 50px;
    width: 50px;
}
4

1 に答える 1

2

CSS 修正:

#alert {vertical-align: top;}

フルCSS

#alert {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: top;
    font-family: Helvetica;
    font-size: 14px;
    color: #fff;
    background: #333;
}

フィドル: http://jsfiddle.net/aC5FW/1/

于 2013-01-15T06:40:39.940 に答える