全国咨询热线:4008-532-808国家教育部设计师资格证青岛指定考试中心

青岛李沧彤欣职业培训学校

设计就业培训专家Design job training expert

热门关键词:

彤欣平面设计培训,室内设计培训,网站设计培训
当前位置:主页 > 彤欣资讯 >

网页设计中元素的垂直居中的几种思路

文章出处:未知网责任编辑:admin作者:admin人气:-发表时间:2018-07-14 17:52【
        平衡之美是常见的一种页面外在美的体现,平面设计如是,网页设计也是。经常我们需要把网页中的元素进行水平居中和垂直居中,一般的水平居中相对来说比较容易,而垂直居中却有很多的坑,下面我们把居中的方式分门别类的给大家介绍下。
一、块级元素的水平居中
        一般的块级元素(div)页面中水平居中用margin:auto;就是把外边距设置成自动。如下图。

二、元素的垂直居中方法一
  1. 元素在垂直方向居于中间早期的做法我们以两个嵌套的图层为例,看如下html代码:
          <body>
              <div id="father">
                   <div id="son"></div>
                   </div>
           </body>
   2.CSS代码如下:
<style type="text/css">
#father{
width: 500px;
height: 500px;
border: 1px solid black;
margin:auto;
}
#son{
width: 200px;
height: 200px;
border: 1px solid red;
margin:148px auto;
 
}
</style>
显示结果:

把图层id 为son的子图层margin值设置 上为(父系高度-子系自身高度-边框高度2)/2即可,也就是148px

三、元素的垂直居中方法二
由于css3技术的推广和手机对所有css3技术的全面支持,我们可以把利用“弹性布局”来进行水平和垂直居中。
1.还是如上的html代码:
  <body>
              <div id="father">
                   <div id="son"></div>
                   </div>
           </body>
2.弹性居中的CSS3代码:
 
<style type="text/css">
#father{
width: 500px;
height: 500px;
border: 1px solid black;
margin:auto;
display: flex;
align-items: center;
justify-content: center;
}
#son{
 
width: 200px;
height: 200px;
border: 1px solid red;
 
 
}
</style>
显示结果如下:

注意,弹性显示方式要在父系中设置即display: flex;,同时设置水平或垂直居中,即align-items: center;和justify-content: center;当然,弹性布局的优势不仅方便把任何元素居中对齐,还可以把父系包含的多个元素平均分布或按比例分布,这个以后有机会我们再讲解。

立即咨询

 

客服感言客服感言

客服感言

 

 

 

优秀学子

优秀学子
• 薛建龙

【彤欣学员分享】室内设计培训的就业前景好吗...more

优秀学子
• 王和鹏

【朋友介绍】我来彤欣学习室内设计 优秀学子分...more

优秀学子
• 李丹

【山东师范大学学生会主席】李丹在青岛彤欣学...more

 

了解详情

 

我们的风采

我们的风采