css中如何解决垂直居中

最新推荐文章于 2023-04-17 15:07:21 发布

马码侠

最新推荐文章于 2023-04-17 15:07:21 发布

阅读量512

点赞数

分类专栏：前端文章标签：垂直居中 CSS 网页制作前端

本文链接：https://blog.csdn.net/qq_43093230/article/details/98253170

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

垂直居中问题

实例一：
问题：如下图所示，由于字体多少导致框大小不一致的情况
在这里插入图片描述
有关代码：
html部分

<div class="col-md-2 col-xs-6 col-probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-map2"></i></div>
              <div class="text">
                <h3>OA系统</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-library"></i></div>
              <div class="text">
                <h3>图书馆系统</h3>

              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-credit-card2"></i></div>
              <div class="text">
                <h3>一卡通系统</h3>
              </div>
            </div>
          </div>

          <div class="col-md-2 col-xs-6 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-home2"></i></div>
              <div class="text">
                <h3>公寓系统</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-display"></i></div>
              <div class="text">
                <h3>资产管理</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-calculator2"></i></div>
              <div class="text">
                <h3>财务系统</h3>
              </div>
            </div>
          </div>
        
        </div>
        <div class="col-md-12">       
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-address-book"></i></div>
              <div class="text">
                <h3>教务系统</h3>  
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-attachment2"></i></div>
              <div class="text">
                <h3>信息标准</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-phone-hang-up"></i></div>
              <div class="text">
                <h3>校内电话总表</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-folder-upload"></i></div>
              <div class="text">
                <h3>数据统计管理</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-stack"></i></div>
              <div class="text">
                <h3>本科招生管理</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-database2"></i></div>
              <div class="text">
                <h3 class="add">研究生信息管理端</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-user-tie"></i></div>
              <div class="text">
                <h3>研究生系统师生服务端</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-pencil2"></i></div>
              <div class="text">
                <h3>Blackboard教学平台</h3>
              </div>
            </div>
          </div>
          <div class="col-md-2 col-xs-6 col-xl-1 probootstrap-animate" data-animate-effect="fadeIn">
            <div class="service hover_service text-center">
              <div class="icon"><i class="icon-users2"></i></div>
              <div class="text">
                <h3>人才招聘信息服务平台</h3>
              </div>
            </div>
          </div>

css部分：h3标签即为框中文字的样式

.service h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

问题原因：
设置了h3与框下部的固定间距，导致换行时不会改变下部的间距，而会改变框的长度，来适应文字的多少。

解决办法：
将h3的文字高度设为2em，则表示所有框中所有文字的高度均为两行，则会统一文字的高度。

.service h3 {
    font-size: 18px;
    /* 加文字的height属性 */
    height: 2em; 
    margin-bottom: 20px;
}

注意： 不能加line-height属性，因为此属性表示一行的高度，并不会解决因为行数而造成的网页变形。

效果：
在这里插入图片描述
实例二：
将元素的文字行度（line-height）设置为父元素的高度(height)

例如：

/* 父元素 */
.food_nav {
	width: 970px;
	height: 34px;
	border-top: 2px solid #C3D6E4;
	margin: 0 auto;
	margin-top: 20px;
	background-color: #ECF1F7;
}
/* 子元素 */
   .food_nav h2 {
   /* 注释子元素的行高 */
   /* line-height: 34px; */
    font-size: 14px;
    font-weight: bold;
    margin-left: 15px;
    color: #666666;
}

设置之前的效果展示
在这里插入图片描述

设置之后：

/* 父元素 */
.food_nav {
	width: 970px;
	height: 34px;
	border-top: 2px solid #C3D6E4;
	margin: 0 auto;
	margin-top: 20px;
	background-color: #ECF1F7;
}
/* 子元素 */
   .food_nav h2 {
   /* 添加子元素的行高属性 */
    line-height: 34px;
    font-size: 14px;
    font-weight: bold;
    margin-left: 15px;
    color: #666666;
}

在这里插入图片描述

小白学习css过程中踩到的坑，希望大家不要再走一遍哦（@~@）

在这里插入图片描述
欢迎在评论区指正啦啦啦~

马码侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中如何解决垂直居中

垂直居中问题实例一：问题：如下图所示，由于字体多少导致框大小不一致的情况有关代码：html部分<div class="col-md-2 col-xs-6 col-probootstrap-animate" data-animate-effect="fadeIn"> <div class="service hover_service text-c...
复制链接

扫一扫

专栏目录