* { margin: 0; padding: 0; box-sizing: border-box; } body { color: #333; } body, p, a { font-size: 16px; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } var, em, i { font-style: normal; } a { color: #333; text-decoration: none; } a:hover { color: #1984dc; } img { vertical-align: top; border: none; } .clearfix:after { content: ""; display: table; clear: both; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } .flex { display: flex; flex-wrap: wrap; } .wrap { position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; } /**头部**/ .header { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-shrink: 0; background-color: #0069bf; padding: 0 15px; z-index: 9; } .header-box { width: 1200px; margin-left: auto; margin-right: auto; line-height: 80px; display: flex; align-items: center; flex-wrap: wrap; align-content: center; } .nav { flex: 1; display: flex; align-items: center; flex-wrap: wrap; align-content: center; } .nav a { text-align: center; } .nav a:hover { background-color: rgba(255, 255, 255, 0.2); } .nav a.on { background-color: rgba(255, 255, 255, 0.2); } .nav:last-child { text-align: right; } .nav li { flex: 1; } .nav li a { display: block; color: #fff; } .mj_hover_menu { background-color: rgba(255, 255, 255, 0.2); } .nav li.selected .submenu { display: block; } /**2023-10-15 start 修改头部二级弹出菜单**/ .nav li .submenu { display: none; position: absolute; top: 80px; background-color: rgba(51, 135, 204, 1); } .mj_menu_news_main { width: 302px; margin-left: auto; margin-right: auto; text-align: left; padding-left: 10px; padding-right: 10px; box-sizing: border-box; line-height: 40px; } .mj_menu_news_main a { display: inline-block!important; flex-shrink: 0; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; height: 40px; line-height: 40px; margin-right: 30px; } .mj_menu_news_main a:hover { background: transparent; color: #ede5d1; } /**2023-10-15 end 修改头部二级弹出菜单**/ .logo { flex-shrink: 0; height: 80px; padding: 15px 30px; box-sizing: border-box; } .logo .img { width: 240px; height: 50px; } .header-right { position: absolute; right: 0; top: 0; line-height: 80px; } .header-right a { color: #fff; padding: 0 15px; } .header-right a i { margin-right: 8px; font-size: 20px; } .header-right a:hover { background-color: rgba(255, 255, 255, 0.2); } /** 大图 **/ #banner { position: relative; height: 500px; z-index: 1; margin-top: 80px; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; /*object-fit: cover;*/ } /** 主内容 **/ .main { position: relative; } .index-title { padding-bottom: 20px; text-align: center; background-image: url(../img/index-title-line.png); background-repeat: no-repeat; background-position: bottom; } .big-text { display: block; margin-bottom: 10px; color: #1984dc; font-size: 28px; letter-spacing: 3px; } .uppercase { display: block; text-transform: uppercase; font-size: 18px; letter-spacing: 3px; } #banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, #banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { width: 20px; height: 20px; background: #fff; } #banner .swiper-button-next:after, #banner .swiper-button-prev:after { color: #fff; } /** 产品中心 **/ .main-pro { padding: 30px 0; background: url(../img/bg2.jpg) repeat; } .main-pro-box { max-width: 1200px; margin-left: auto; margin-right: auto; flex-wrap: wrap; text-align: center; } .main-pro-box-list { flex: 1; margin: 50px 15px; background: #fff; } .main-pro-box-list .img { background: #f5f5f5; padding: 30px 20px; } .main-pro-box-list .img .icon { font-size: 50px; color: #1984dc; } .main-pro-box-list div { margin-bottom: 30px; } .main-pro-box-list .text { padding: 10px 0; } .more { color: #1984dc; display: inline-block; padding: 0 30px; line-height: 40px; border: solid 1px #1984dc; } .more .icon { margin-left: 8px; } .more:hover { background: #1984dc; color: #fff; } /** 关于我们 **/ .main-about { max-width: 1200px; margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom: 50px; } .main-about-img { flex-shrink: 0; } .main-about-img img { width: 420px; height: 360px; } .main-about-text { flex: 1; margin-left: 50px; } .main-about-text div { margin-top: 20px; line-height: 2; font-size: 16px; } .more-arrow { display: block; text-align: right; } .more-arrow .icon { color: #1984dc; font-size: 30px; line-height: 40px; padding: 0 30px; display: inline-block; border: solid 1px transparent; } .more-arrow:hover .icon { color: #1984dc; border: solid 1px #1984dc; } /** 新闻动态 **/ .main-news { padding: 50px 0; } .main-news-box { max-width: 1200px; margin-left: auto; margin-right: auto; } .main-news-box-list { padding: 50px 0; } .main-news-box-list div { flex: 1; margin: 0 10px; background: #f5f5f5; } .main-news-box-list div p { padding: 0 20px; } .main-news-box-list div img { width: 100%; height: 240px; margin-bottom: 20px; } .main-news-box-list div b { margin-bottom: 10px; display: block; } .main-news-box-list div .time { text-align: right; margin-bottom: 20px; color: #999; } .main-news-box-list .link { padding: 20px; } .main-news-box-list .link p { padding: 0; } .main-news-box-list .link a { margin: 15px 0; display: block; color: #333; } .main-news-box-list .link label { color: #999; } .main-news-box-list .link a:hover { color: #1984dc; } .side-main { margin-top: 80px; background: url(/img/pc_banner1.jpg); background-repeat: no-repeat; background-size: contain; } /** 产品介绍 **/ .side-main-box { max-width: 1200px; margin-left: auto; margin-right: auto; } .side-pro-banner { position: relative; } .side-pro-banner img { width: 100%; height: 340px; } .side-pro-banner div { position: absolute; left: 0; top: 0; color: #333; padding-top: 60px; font-size: 40px; } .side-pro-banner div p { margin: 20px 0; } .pro-title { font-size: 20px; border-bottom: solid 3px #1984dc; display: inline-block; padding-bottom: 5px; margin-bottom: 10px; margin-top: 20px;/*margin-top: 40px;*/ font-weight: bold; } .seat { flex-shrink: 0; line-height: 10px;/*line-height: 50px; 修改*/ color: #fff; margin-left:-10px; text-shadow: 2px 2px 2px #000; } .seat a { color: #fff; } .side-pro-tab .tab { flex: 1; text-align: right; } .side-pro-tab .tab a { padding-left: 10px; padding-right: 10px; display: inline-block; height: 50px; line-height: 50px; box-sizing: border-box; margin-left: 5px; margin-right: 5px; } .side-pro-tab .tab a:hover { color: #1984dc; border-bottom: solid 3px #1984dc; } .side-pro-tab .tab button { background-color: #1984dc; border: solid 1px #1984dc; height: 50px; color: #fff; font-size: 20px; padding-left: 30px; padding-right: 30px; margin-left: 20px; } .side-pro-box { line-height: 2; padding-bottom: 50px; background-color: #fff; } /** 党建工作 **/ .party-build { background-image: url(../img/party-build-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .side-title { font-size: 40px; padding-top: 150px; color: #fff; display: block; padding-bottom: 150px; } .side-main-con { /*background: #fff;*/ padding: 10px 20px;/*padding: 40px 80px;*/ /*margin-top: 70px;*/ background: url(/img/lll.png) no-repeat; background-color:#fff; border-radius: 10px; } .side-main-con-text { line-height: 1.6; margin-top: 20px; min-height: 500px; padding:0px 10px; } /** 发展历程 **/ .history { background-image: url(../img/history-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .history-title { font-size: 30px;/*font-size: 36px;*/ line-height: 1.5; } .history-con { height: 400px; margin-left: -20px; margin-right: -20px; } .history-list { background-image: url(../img/history-line.png); background-position: left top; background-repeat: no-repeat; padding-left: 5px;/*padding-left: 30px;*/ text-align: left; } .history-time { line-height: 1.5; font-size: 24px; } .history-line { width: 100px; height: 3px; margin-bottom: 10px; display: inline-block; background-color: #1984dc; } .history-text { line-height: 2; height: 100px; max-width: 210px; } .history-con .swiper-button-next { right: 0; } .history-con .swiper-button-prev { left: 0; } .min-nav { flex: 1; padding-left: 100px; } .min-nav a { margin: 0 30px; } .min-nav a.on { color: #1984dc; } /** 服务专区 **/ .service { background-image: url(../img/service-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .service-list .service-list-box { flex: 1; margin: 30px; background-color: #fff; padding: 40px 60px; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background-position: center; background-repeat: no-repeat; background-size: 40%; } .service-list .service-list-box:first-child { margin-left: 0; background-image: url(../img/icon01.png); } .service-list .service-list-box:last-child { margin-right: 0; background-image: url(../img/icon02.png); } .service-list .service-list-box h2 { text-align: center; font-size: 24px; } .service-line { width: 100px; height: 3px; margin-bottom: 10px; display: inline-block; background-color: #1984dc; } .service-list .service-list-box .flex { text-align: left; margin-top: 30px; } .service-list .service-list-box .service-icon-p { flex: 1; } .service-list .service-list-box .service-icon { width: 30px; height: 30px; display: block; border-radius: 50%; margin-right: 10px; text-align: center; line-height: 30px; font-size: 16px; color: #fff; margin-top: 16px; flex-shrink: 0; background: -webkit-linear-gradient(top, #0971c7, #399cee); background: -o-linear-gradient(top, #0971c7, #399cee); } .service-list .service-list-box b { font-size: 20px; } /** 产品列表 **/ .product { background-image: url(../img/product-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .product-list { width: 33.33%; padding: 10px; display: inline-block; float: left; box-sizing: border-box; text-align: center; height:311px; } .product-list .product-list-con { padding: 20px; position: relative; background: #f4f5fa; box-sizing: border-box; border-bottom: solid 3px transparent; } .product-list .img { width: 100%; } .product-list .img img { /*width: 100%;*/ max-height:200px; } .product-arrow { position: absolute; right: 20px; top: 10px; font-size: 24px; color: #ccc; z-index: 3; } .product-list-con:hover { color: #1984dc; border-bottom: solid 3px #1984dc; } .product-list-con:hover .product-arrow { color: #1984dc; } /** 公司介绍 **/ .about { background-image: url(../img/about-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } /** 组织机构 **/ .organize { background-image: url(../img/organize-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } /** 新闻动态 **/ .news { background-image: url(../img/news-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .news-list li { width: 33.33%; height: 320px; padding: 15px; display: inline-block; float: left; box-sizing: border-box; text-align: center; } .news-list li img { /*width: 100%;*/ height: 160px; margin-bottom: 10px; } .news-list li b { font-size: 18px; font-weight: normal; } .news-list li .time { color: #999; margin-bottom: 10px; } /** 新闻动态内容 **/ .news-seat { background-color: #f3f8ff; line-height:20px; } .news-details { padding: 50px 10px;/*padding: 50px 0px;*/ line-height: 1.6; background-color: #fff; } .news-details .h2 { font-size: 30px;/* font-size: 36px;*/ margin: 20px 0; } .news-details img { max-width: 100%; margin: 20px 0; } /** 投资者关系 **/ .investor { background-image: url(../img/investor-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .investor-tab-title a { flex-shrink: 0; } .investor-tab-title ul { flex: 1; text-align: right; border: none; text-shadow: none; color: #999; } .layui-this:after { display: none; } .investor-tab-title li { height: 40px; line-height: 40px; font-size: 18px; margin-left: 10px; margin-right: 10px; box-sizing: border-box; } .investor-tab-title .layui-this { color: #1984dc; border-bottom: solid 3px #1984dc; } .investor-tab-item li a { display: flex; flex-wrap: wrap; border-bottom: solid 1px #eee; padding: 20px; } .investor-tab-item li a:hover { background: #f5f5f5; } .investor-tab-item li span { flex: 1; } .investor-tab-item li i { flex-shrink: 0; color: #999; } /** 人力资源 **/ .people { background-image: url(../img/people-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .people .layui-tab-title { border: none; } .people .layui-tab-title li { height: 40px; line-height: 40px; font-size: 18px; margin-left: 10px; margin-right: 10px; box-sizing: border-box; } .people .layui-tab-title .layui-this { color: #1984dc; border-bottom: solid 3px #1984dc; } .people-item-list { padding: 20px; display: block; border-bottom: solid 1px #eee; } .people-item-list:hover { background: #f5f5f5; } .people-item-list .title { display: flex; flex-wrap: wrap; } .people-item-list .title span { flex: 1; } .people-item-list .title i { flex-shrink: 0; color: #999; } .my-biji-view { margin-top: 10px; } .my-biji-view .icon { color: #999; margin-right: 8px; } .my-biji-view li .biji-oth { display: flex; align-items: center; justify-content: space-between; } .my-biji-view li .zhankai { padding: 2px 10px; border: none; outline: none; background-color: #eee; color: #333; border-radius: 4px; } .biji-content { padding: 10px 0; line-height: 2; } .delivery-btn { margin-top: 30px; color: #fff; background: #1984dc; border: solid 1px #1984dc; height: 50px; padding: 0 40px; border-radius: 6px; cursor: pointer; } .search-bar { margin: 30px 0; } .search-bar input { flex: 1; height: 50px; padding: 0 15px; border: solid 1px #ccc; border-radius: 6px 0 0 6px; } .search-bar button { flex-shrink: 0; color: #fff; background: #1984dc; border: solid 1px #1984dc; height: 50px; padding: 0 30px; border-radius: 0 6px 6px 0; cursor: pointer; } /** 工程案例 **/ .case { background-image: url(../img/case-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .case-list { margin: 30px 0; } .case-list .biji-oth { font-size: 24px; } .case-list .biji-line { width: 100px; height: 3px; margin-bottom: 10px; margin-top: 10px; display: inline-block; background-color: #1984dc; } .case-list ul li.icon { color: #1984dc; } .case-list .zhankai { width: 36px; height: 36px; text-align: center; cursor: pointer; font-size: 32px; line-height: 28px!important; padding: 0!important; display: inline-block; border-radius: 50%!important; color: #0069bf!important; background: #fff!important; font-weight: normal; border: solid 1px #0069bf!important; } .case-list .zhankai:hover { color: #fff!important; background: #0069bf!important; border: solid 1px #0069bf!important; } /** 公司荣誉 **/ .honor { background-image: url(../img/honor-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .honor-title { font-size: 32px; color: #666; } .honor-img { margin: 50px 0; } .honor-img li { width: 25%; display: inline-block; float: left; padding: 10px 0; } .honor-con1 .honor-con1-list { background-color: #fff; padding: 20px; text-align: center; background-position: center; background-repeat: no-repeat; border-radius: 8px; background-size: 40%; box-shadow: 0 0 40px rgb(0 0 0 / 10%); background: -webkit-linear-gradient(top, #edf7ff, #fff); background: -o-linear-gradient(top, #edf7ff, #fff); text-align: left; position: relative; flex: 1; margin: 20px; } .honor-con1 .honor-con1-list div.flex { margin: 15px 0; } .honor-con1 .honor-con1-list .icon1 { background: #1984dc; width: 20px; height: 20px; color: #fff; text-align: center; border-radius: 50%; font-size: 10px; margin-right: 10px; flex-shrink: 0; } .honor-con1 .honor-con1-list span { flex: 1; } .honor-con1 .honor-con1-list .icon2 { width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 8px; position: absolute; top: -15px; right: -15px; color: #1984dc; font-size: 32px; background-color: #fff; box-shadow: 0 5px 5px rgb(0 0 0 / 5%); background: -webkit-linear-gradient(top, #edf7ff, #fff); background: -o-linear-gradient(top, #edf7ff, #fff); } .honor-con2 { padding: 20px; line-height: 50px; border-radius: 8px; background-color: #fff; box-shadow: 0 5px 5px rgb(0 0 0 / 5%); background: -webkit-linear-gradient(top, #edf7ff, #fff); background: -o-linear-gradient(top, #edf7ff, #fff); } .honor-con2 div { flex: 1; } .honor-con2 .icon { width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 4px; color: #1984dc; font-size: 32px; background-color: #fff; margin-right: 10px; box-shadow: 0 5px 5px rgb(0 0 0 / 5%); background: -webkit-linear-gradient(top, #edf7ff, #fff); background: -o-linear-gradient(top, #edf7ff, #fff); } /** 公司文化 **/ .culture { background-image: url(../img/culture-banner.png); background-repeat: no-repeat; background-size: 100% 385px; } .culture-title { font-size: 30px;/*font-size: 32px;*/ /*color: #666;*/ } .culture-list { width: 50%; float: left; padding: 10px; box-sizing: border-box; } .culture-list-box { padding: 20px; background: #f2f2f2; } .culture-list-box .biji-oth { font-size: 24px; } .culture-list-box ul li.icon { color: #1984dc; } .culture-list-box .zhankai { width: 36px; height: 36px; text-align: center; cursor: pointer; font-size: 32px; line-height: 28px!important; padding: 0!important; display: inline-block; color: #333!important; font-weight: normal; margin-left: 60px; } .culture-list-box .zhankai:hover { color: #0069bf!important; } .culture-list-box .biji-content { border-top: solid 1px #ccc; padding-top: 10px; height:64px; } .culture-list-box:hover { color: #fff; /*background-color: rgba(0, 105, 191, 1);*/ background: linear-gradient(81DEG,#2b6dde 0%,#2CA6CC 45%,#2CCCC0 100%)!important; } .culture-list-box:hover .zhankai { color: #fff!important; } .culture-list-box:hover .biji-content { border-top: solid 1px #fff; } /** 底部返回 **/ .footer-return { background-color: #f3f8ff; padding: 10px; } .footer-return-box { width: 1200px; margin-left: auto; margin-right: auto; align-items: center; flex-wrap: wrap; align-content: center; } .footer-return-box a { line-height: 40px; } /** 相关链接 **/ .footer-link { background: #f8f8f8; } .footer-link div { width: 1200px; margin-left: auto; margin-right: auto; line-height: 40px; padding: 20px 0; } .footer-link b { font-size: 18px; } .footer-link a { color: #1984dc; background: #fff; border: solid 1px #1984dc; padding: 0 30px; margin: 0 10px; display: inline-block; } .footer-link a:hover { color: #fff; background: #1984dc; border: solid 1px #1984dc; } /** 底部 **/ .footer { padding: 30px 0; background-image: url("../img/footer-banner.jpg"); background-position: center; background-size: 100% 100%; } .footer-box { width: 1200px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; } .footer-logo { width: 240px; height: 50px; } .footer-left { text-align: center; flex-shrink: 0; } .footer-left div { margin: 10px; color: #fff; } .footer-left div img { margin-bottom: 10px; } .footer-right { display: flex; flex-wrap: wrap; flex: 1; } .footer-right ul { padding: 0 30px; } .footer-right ul b { font-size: 18px; color: #fff; margin-bottom: 10px; display: block; margin-top: 10px; } .footer-right ul a { display: block; margin: 10px 0; opacity: 0.8; color: #fff; } .footer-right ul a:hover { opacity: 1; text-decoration: underline; } /** 版权 **/ .copyright { background-color: #0069bf; padding: 15px; text-align: center; color: #fff; } /**搜索框**/ #search-box input { outline: none; } #search-box input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } #search-box input::-webkit-search-decoration, #search-box input::-webkit-search-cancel-button { display: none; } #search-box input[type=search] { background: #3387cc url(../img/search-icon.png) no-repeat 9px center; border: solid 1px #3387cc; padding: 10px 10px 10px 32px; width: 60px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } #search-box input[type=search]:focus { width: 130px; background-color: #3387cc; border-color: #3387cc; -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5); -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5); box-shadow: 0 0 5px rgba(109, 207, 246, .5); } #search-box input:-moz-placeholder { color: #fff; } #search-box input::-webkit-input-placeholder { color: #fff; } #search-box input[type=search] { width: 20px; padding-left: 10px; color: transparent; cursor: pointer; margin-right: 10px; } #search-box input[type=search]:hover { background-color: #3387cc; } #search-box input[type=search]:focus { width: 130px; padding-left: 32px; color: #fff; background-color: #3387cc; cursor: auto; } #search-box input:-moz-placeholder { color: transparent; } #search-box input::-webkit-input-placeholder { color: transparent; } /** 吉峰 分页 **/ .pagebar .pagination { display: flex; margin-left: 28%; justify-content: center; margin-top: 10px; } .pagination a { background: #fff; border: 1px solid #ccc; color: #333; font-size: 14px; padding: 8px 12px; margin: 0 5px; border-radius: 3px; } .pagination span { color: #333; font-size: 14px; padding: 8px 2px; margin: 0 5px; border-radius: 3px; } .pagination a:hover { color: #1984dc; border: 1px solid #1984dc; } .pagination a.page-num-current { color: #fff; background: #1984dc; border: 1px solid #1984dc; } /*新闻列表*/ .lists { width: 100% !important; /* padding-bottom: 20px; */ margin: 6px auto 54px; box-shadow: 0 0 30px rgb(221 225 226); background: white; box-sizing: border-box; } .item { /* width: 95%; */ height: 110px; padding-top: 10px; box-sizing: border-box; background: white; border-bottom: solid 1px gainsboro; margin: auto; vertical-align: middle; position: relative; } .item:hover { background: -webkit-linear-gradient(bottom, rgba(44, 186, 198, 1), rgba(45, 174, 203, 1)); background: -o-linear-gradient(top, rgba(44, 186, 198, 1), rgba(45, 174, 203, 1)); background: -moz-linear-gradient(top, rgba(44, 186, 198, 1), rgba(45, 174, 203, 1)); background: linear-gradient(to top, rgba(44, 186, 198, 1), rgba(45, 174, 203, 1)); color: white; } .item-left { /* width: 475px; */ height: 90px; display: inline-table; /* display: flex; */ vertical-align: middle; } .item-right { width: 35px; height: 35px; background: url(/img/xiangyoulan.svg); background-repeat: no-repeat; margin: auto 20px; display: inline-table; position: absolute; right: 34px; top: 50%; transform: translateY(-50%); } .item-left .inner-left { width: 90px; height: 90px; margin: 0 30px 0 20px; display: inline-table; vertical-align: middle; } .kn1 { margin-left: -10px; font-weight: bold; width: 850px; display: inline-table; vertical-align: middle; } .item:hover .inner-top { color: white; } .inner-left>div:first-child { height: 60%; font-size: 38px; line-height: 54px; color: rgba(41, 186, 179, 1); font-weight: 550; display: inline-table; vertical-align: middle; } .inner-left>div:last-child { font-size: 12px; height: 30%; line-height: 27px; display: inline-table; vertical-align: middle; } .inner-left>div { width: 100%; height: 50%; text-align: center; display: inline-table; vertical-align: middle; }