css div居中布局及居右布局
互聯(lián)網(wǎng) 發(fā)布時間：2009-06-06 16:35:37 作者：jb51 
我要評論
我要評論居中布局是最基本的布局方式，下面會通過示例展示如何設置css樣式實現(xiàn)居中布局，感興趣的朋友跟隨小編一起看看吧
概述
居中布局是最基本的布局方式，下面會通過示例展示如何設置css樣式實現(xiàn)居中布局
居中示例
<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居中布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
帝國cms 從6.6升級到7.0 Multiple primary key defined解決方法
今天將帝國cms 從6.6升級到7.0 出現(xiàn)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- 現(xiàn)在點擊群組，默認是我參與的群組。剛剛注冊的會員點擊群組功能后會顯示為空，部分站長覺的這樣不好看2011-01-30
- UCenter Home 提供了方便的日志導入功能，您可以將自己在其他站點發(fā)表的日志導入到 UCenter Home 的日志中。2011-01-30
- UCHome 的首頁有兩種情況，一種開放游客可瀏覽時的首頁，另一種是關閉游戲瀏覽時的首頁。2011-01-30
- 關鍵字描述：UCenter Home 康盛創(chuàng)想 SNS 建站系統(tǒng) 社交網(wǎng)絡 網(wǎng)站 UCenter Home是康盛創(chuàng)想（Comsenz）公司發(fā)布的一款SNS建站系統(tǒng)，目前最新版本是1.5，截止2009年3月,用2009-06-06
- 關鍵字描述：UCenter Home 郵箱設置 功能 建站系統(tǒng) 詳解 SNS sina UCenter Home是Comsenz公司發(fā)布的一款SNS建站系統(tǒng)，目前最新版本是1.5。下面我們以大家常用的sin2009-06-06
- 關鍵字描述：修改 UCenter Home 分組名稱 康盛創(chuàng)想 Comsenz SNS UCenter Home是康盛創(chuàng)想（Comsenz）公司發(fā)布的一款SNS建站系統(tǒng)，目前最新版本是1.5。UCenter Home 默認2009-06-06
- 關鍵字描述：設置 灌水 用戶 驗證 注冊 可以 必須 登錄 發(fā)布 頁面 UCenter Home是Comsenz公司發(fā)布的一款SNS建站系統(tǒng)，目前最新版本是1.5。UCenter Home1.5中加強了2009-06-06