html编写过程中组件的布局

　　在实现html画面的过程中，经常涉及到文本居中、div水平垂直居中相关的问题，为加强记忆，特总结如下：

　　1、文本居中。测试条件是在div中的文本，html定义如下：

<div class="circle inter">#201</div>

　　CSS定义如下：

.inter {
    /* 宽度和高度需要相等 */
    width: 40px;
    height: 40px;
    /* margin: 0 auto; */
    background-color: white;
    color: #56A1E9;
    
    /* 文本居中 */
    line-height:40px;/* height与line-height两个值要相等 */
    text-align: center;
}

　　2、单个div居于父div中央，html定义如下：

<div class="circle outer">
    <div class="circle inter">#201</div>
</div>

　　CSS定义如下：

.outer {
    /* 宽度和高度需要相等 */
    width: 50px;
    height: 50px;
    position: relative;
    background-color: #6DB0FF;
}

.inter {
    /* 宽度和高度需要相等 */
    width: 40px;
    height: 40px;
    /* margin: 0 auto; */
    background-color: white;
    color: #56A1E9;
    
    /* 文本居中 */
    line-height:40px;/* height与line-height两个值要相等 */
    text-align: center;
    
    /* 相对父元素中间对齐相等 */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

　　需要注意的是，父div中先定义position，然后子组件中再定义相对的position

　　3、多个元素在父div中同一行居中显示，html代码如下：

<div class=toolbar_footer>
    <a id="micromonitor" href="#" class="toolButton">按钮1</a>
    <a id="lighting" href="#" class="toolButton ">按钮2</a>
    <a id="water" href="#" class="toolButton ">按钮3</a>
    <a id="beltline" href="#" class="toolButton ">按钮4</a>
</div>

　　CSS定义如下：

.toolbar_footer .toolButton {
    position: relative;
    margin: 0px 5px;
    width: 40px;
    height: 40px;
    /* float: left; */
    display:inline-block; /* 设置按钮同一行居中显示 */
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

 

转载于:https://www.cnblogs.com/fordreaming/p/5486042.html