JSFiddle - React, Tailwind, and code Playground

by tomboliu

HTML

<div id="a">A
</div>
<div id="b">B
</div>

CSS

div{
    border: 1px solid; /* 指定邊框寬度 */
    width:50%; /* 指定 div 寬度 */
    float:left; /* 讓兩個 div 排在同一行 */
    height:100px; /* 指定 div 高度 */
    font-size:24px; /* 指定版面內字體大小 */
}
#a{
    background-color:red; /* 背景色:紅 */
    text-align:center;
    vertical-align:middle;
}
#b{
    background-color:green; /* 背景色:綠 */
    text-align:center;
    vertical-align:middle;
}

#a:before{
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
#b:before{
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
}