html中的混合布局居中

最新推荐文章于 2021-07-03 21:57:18 发布

xiejunna

最新推荐文章于 2021-07-03 21:57:18 发布

阅读量716

点赞数

分类专栏： html 文章标签： html 布局

本文链接：https://blog.csdn.net/xiejunna/article/details/52604135

版权

html 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

一.适用较大的图片
html body中的结构：
    <div class="index_item0" ">
        <div class="img1_show_index">
            <div class="img_0_1">
                <img class="img_img" src="../img/0_car.png" />
            </div>
        </div>
               <div class="div_text_index">
            <h5 class="h5_title">车险服务</h5>
            <p class="summary_text_p">
                平台介绍以及服务的介绍可后台进行修改以及服务的介绍可后台进行修改
            </p>
        </div>

    <div class="img2_next">
        <div class="img_0_2">
           <img class="img_img" src="../img/all_next.png" />
        </div>
    </div>
     </div>
     css中的样式：
     .index_item0 {
    width: 90% height: 100px;
    margin-left: 5%;
    margin-right: 5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.img1_show_index {
    width: 18%;
    float: left;
}
.img_0_1 {
    width: 18%;
    height: 100px;
    display: table-cell;
    /*最重要*/
    vertical-align: middle;
    /*设置水平居中*/
}
.img_img {
    border: none;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}
.div_text_index {
    float: left;
    height: 100px;
    margin: 0 2% 0 2%;
    width: 73%;
}
.h5_title {
    font-size: 0.95rem;
    color: #343434;
    padding-top: 8%;
    margin-left: 5%;
}
.summary_text_p {
    color: #949494;
    font-size: 14px;
    margin-top: 3%;
}
.img2_next {
    width: 5%;
    float: left;
}
.img_0_2 {
    width: 5%;
    height: 100px;
    display: table-cell;
    /*最重要*/
    vertical-align: middle;
    /*设置水平居中*/
}
二.适用较小的图片
较精密的居中，使用与很小的图标在div中居中
<div class="search_div_outer">
    <div class="search_img">
    <div class="search_img1">
        <img class="img_search" src="../img/ss.png" /><p></p>
    </div>
    </div>
</div>
css样式：
.search_div_outer{
    width: 88%;height: 40px;
    margin:3% 6%;
    /*background-color: #A9DED6;*/
    border:solid 1px #E6E6E6;
    border-radius: 30px;
}
.search_img{
    float: left;
    width: 10%;height: 30px;
    margin:5px 3%;
    border-right: solid 1px #F5F5F5;
    /*background-color: #DAD55E;*/

}
.search_img1{
    width: 100%;height: 30px;
    display: table-cell;
    vertical-align: middle;
}
.img_search{
    vertical-align: middle;
    max-width: 100%;
    width: 70%;

}