Ⅰ css如何讓浮動的div居中對齊
.box{width:200px;margin:0 auto;}
這樣box這個div就可以居中對齊
Ⅱ 通過JS彈出的浮動DIV層,居中於窗口中。
把style裡面的left和top拿到js裡面寫
在CSS裡面用expression是只有IE支持的 這就是不兼容的東西
<div id="divCenter" align="center" style="position: absolute; z-index: 3; display: none; background-color: #fff;" >
<span style="background-color:Gray; width:390px; height:220px; text-align:center;"><BR /><BR />面板中的內容</span>
</div>
<script language="JavaScript">
document.getElementById('divCenter').style.left = (document.body.offsetWidth - 540) / 2;
document.getElementById('divCenter').style.top = (document.body.offsetHeight - 170) / 2 + document.body.scrollTop;
</script>
<a onclick="javascript:document.all.divCenter.style.display='block';">顯示該層</a>
Ⅲ html怎麼讓浮動的文字居中顯示
1,文字外層,放個div,div加個樣式,
<div class="text">這里是想要居中的文字</div>,
2樣式表裡這樣寫:
.text{text-align:center;}
<div class="text" style=" text-align:center;">這里是想要居中的文字</div>
Ⅳ 首頁浮動層定義位置:上下頂置,左右居中
讓id="apDiv1"的div上下頂置,左右居中
#apDiv1 {
text-align:center;
position:absolute;
width:200px;
z-index:1;
left: 50%;
top: 0;
bottom: 0;
margin-left: -100px;
}
Ⅳ 把一個層設置浮動之後怎樣再讓它居中顯示啊
【居中顯示】
「居中顯示」的意思是高亮層位於視框左右上下居中的位置。
實現這個有兩個方法:
1,視框寬度減去高亮層寬度的一半就是居中需要的left值;
2,先設置left值為50%,然後marginLeft設為負的高亮層寬度的一半。
方法1相對方法2需要多一個視框寬度,而且方法2在縮放瀏覽器時也能保持居中,明顯方法2是更好,不過用margin會影響到left和top的計算,必須注意(例如SetFix修正的地方)。這里我選擇了方法2,還要注意offsetWidth和offsetHeight需要在高亮層顯示之後才能獲取,所以定位程序需要放到高亮層顯示之後:
this.Box.style.top = this.Box.style.left = "50%";
if(this.Fixed){
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
}else{
this.SetCenter();
}
其中如果不是固定定位,需要用SetCenter程序來修正滾屏參數,SetCenter程序是這樣的:
this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";
詳細看參考資料
Ⅵ js怎麼讓浮動層始終在瀏覽器下居中
設置其標簽屬性 align="center" CSS設置:bottom:0px就好了
Ⅶ 如何居中一個浮動元素比如寬500 高 300 的層,然後設置層的外邊距,怎麼寫
原文出處:http://blog.sina.com.cn/s/blog_8d322eff010192wx.html
回答:設置容器的浮動方式為相對定位
然後確定容器的寬高 比如寬500 高 300 的層
然後設置層的外邊距
[html] view plain 在CODE上查看代碼片派生到我的代碼片
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
width: 500px;
height: 300px;
margin: -150px 0 0 -250px;
position: absolute;
left: 50%;
top: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div>
元素居中
</div>
</body>
</html>
另一例:
轉自:http://..com/link?url=odE_aNuRcMMFNPoCecdRihon-_3UOkl0dqhWCcxmXDgz9kGqa
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>讓層垂直居中於瀏覽器窗口</div>
其實解決的思路是這樣的:首們需要position:absolute;絕對定位。而層的定位點,使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。
如:一個層寬度是400,高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值為-150。<a target=_blank target="_blank" class="inner-link decor-none" href="http://..com/search?word=margin-left&fr=qb_search_exp&ie=utf8" rel="nofollow" style="color: rgb(45, 100, 179); text-decoration: none;">margin-left</a>的值為-200。這樣我們就實現了層垂直居中於瀏覽器的樣式編寫
如果你是想讓div垂直居中與div,那麼你可以在父級div上加一個position:relative即可
Ⅷ css div 層浮動以後 如何再在頁面中居中
外層加個div給個寬,margin: 0 auto 即可。
Ⅸ css 怎麼使浮動的板塊居中啊
二種方法
1、父級div設置固定寬度後加margin:0 auto; 然後子級div加浮動,即可實現;不過次方法不能無限伸展;
2、在table內插入div,div設置浮動,在table上設置margin:0 auto; 而table不要設置寬度,因為table默認是寬度最小化的,實現居中的效果會比較好,而且可以無限伸展
註:有些老是說table不好,除非是做表格,其他地方絕對不要用,其實我個人是比較喜歡用table布局的,不過重點布局還是div+css,在一些容易出錯的或者必須的地方用table也是不錯的選擇,人人都說div+css布局,我呢可以說是div+table+css布局
Ⅹ CSS中浮動之後的導航欄居中
給你的容器#containner設置一個寬度,然後使用語句margin:0 auto;其實就可以了。但可能IE6不支持自動空白邊。你的body里的text-align:center;原意是讓文本居中,但IE將text-align:center;理解成讓所有的東西都居中,包括div標簽;這是原理,下面我在你代碼的基礎上修改如下(測試可用):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body *
{
margin:0px;
padding:0px;
text-align:center;
}
#containner
{
width:500px;
margin:0 auto;
position:relative;
background-color:#F4FFFF;
/*top:0px;*/
/*left:0px;*/
}
#banner2
{
width:100%;
height:100%;
float:left;
/*margin-left:0px;*/
/*margin-top:0px;*/
/*padding:0px; */
font-size:18px;
}
#banner2 li
{
width:15.64%;
height:100%;
margin:1px;
/*text-align:center; */
float:left;
display:block;
text-decoration:none;
border-bottom-style:outset;
border-right-style:outset;
}
#banner2 li a
{ height:100%;
color:#3399FF;
text-decoration:none;
display:block;
/*text-align:center;*/
/* margin-left:0px;*/
padding:2px;
background:#DDF4FF
}
#banner2 li a:hover
{
background:#005279;
color:#FF6600;
}
</style>
</head>
<body>
<div id="containner">
<ul id="banner2" >
<li><a href="#">首頁</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</ul>
</div>
</body>
</html>
有很多細節,如body後的*,通配選擇符。為#containner增加了寬度設定,為ul標簽設置了id"banner2",取消了原來的div等,你自己比較下。我用FireFox和IE8測試了,效果都出來了。你可再用IE6試試 。還有其它居中的方法,如定位和負值空白邊(負值外邊距)等,這需要你對CSS更深的認識。