css div居中布局及居右布局
互联网 发布时间：2009-06-06 16:35:37 作者：jb51 
我要评论
我要评论居中布局是最基本的布局方式，下面会通过示例展示如何设置css样式实现居中布局，感兴趣的朋友跟随小编一起看看吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
概述
居中布局是最基本的布局方式，下面会通过示例展示如何设置css样式实现居中布局
居中示例
<body>
<div style="display: flex;">
<!--不设置样式，左上角对齐-->
<div class="first-div">
<div class="second-div">
</div>
</div>
<div class="first-div center-one">
<div class="second-div">
</div>
</div>
<div class="first-div" style="display: flex;">
<div class="second-div center-inner">
</div>
</div>
</div>
<style>
.first-div
{
width:100px;height: 100px;
margin-left:10px;
background: gray;
}
.second-div
{
width:50px;height: 50px;background: green;
}
.center-one
{
display: flex;
align-items: center;
justify-content: center;
}
.center-inner
{
margin: auto;
}
</style>
</body>居中分析
- 方法一：在父元素使用如下样式
display: flex;
align-items: center; //上下居中
- justify-content: center;//左右居中
- 方法二：需要父元素和子元素按照如下的样式进行设置
- 父div使用display: flex;
- 子元素使用margin: auto;
- 如果只需要上下居中使用margin-top:auto, margin-bottom:auto
<body>
<div style="display: flex;">
<!--不设置样式，左上角对齐-->
<div class="first-div">
<div class="second-div">
</div>
</div>
<div class="first-div">
<div class="second-div right-one">
</div>
</div>
<div class="first-div right-two">
<div class="second-div">
</div>
</div>
</div>
<style>
.first-div
{
width:100px;height: 100px;
margin-left:10px;
background: gray;
}
.second-div
{
width:50px;height: 50px;background: green;
}
.right-one
{
float: right;
}
.right-two
{
display: flex;
justify-content: right;
}
</style>
</body>居右分析
- 方法一：在子元素使用样式 float:right即可
- 方法二：在父元素使用样式
display: flex;
justify-content: right;
到此这篇关于css div居中布局及居右布局的文章就介绍到这了,更多相关css div居中布局内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
帝国cms 从6.6升级到7.0 Multiple primary key defined解决方法
今天将帝国cms 从6.6升级到7.0 出现Multiple primary key defined错误，这里分享下解决方法2013-12-13- 这篇文章主要为大家分享下uchome模板缓存文件存放位置，需要的朋友可以参考下2013-12-13
uchome开启漫游是提示：An unknown error occurred
.uchome开启漫游是提示：An unknown error occurred. Please resubmit the request. (ERRCODE:1)(ERRCODE:50)2013-12-12- 现在点击群组，默认是我参与的群组。刚刚注册的会员点击群组功能后会显示为空，部分站长觉的这样不好看2011-01-30
- UCenter Home 提供了方便的日志导入功能，您可以将自己在其他站点发表的日志导入到 UCenter Home 的日志中。2011-01-30
- UCHome 的首页有两种情况，一种开放游客可浏览时的首页，另一种是关闭游戏浏览时的首页。2011-01-30
- 关键字描述：UCenter Home 康盛创想 SNS 建站系统 社交网络 网站 UCenter Home是康盛创想（Comsenz）公司发布的一款SNS建站系统，目前最新版本是1.5，截止2009年3月,用2009-06-06
- 关键字描述：UCenter Home 邮箱设置 功能 建站系统 详解 SNS sina UCenter Home是Comsenz公司发布的一款SNS建站系统，目前最新版本是1.5。下面我们以大家常用的sin2009-06-06
- 关键字描述：修改 UCenter Home 分组名称 康盛创想 Comsenz SNS UCenter Home是康盛创想（Comsenz）公司发布的一款SNS建站系统，目前最新版本是1.5。UCenter Home 默认2009-06-06
- 关键字描述：设置 灌水 用户 验证 注册 可以 必须 登录 发布 页面 UCenter Home是Comsenz公司发布的一款SNS建站系统，目前最新版本是1.5。UCenter Home1.5中加强了2009-06-06
最新评论