如何水平居中

wtcsy 2009-09-01 10:24:58
下面滚动条部分想让它水平居中,或者说让它看上去象水平居中(ie,ff下)
不要用到hack,不然在计算方面会出现点误差....
大虾们 指教下吧
<!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=gb2312" />

<title></title>



</head>

<body style=" padding:30px; margin:0px;">

    <div id="container3" style="width:840px; height:216px;background-image:url(l.gif); border:2px solid #b50000; border-top:none;">

    <div style="height:170px; width:90%; overflow:hidden;margin:0 auto;">

	<table width="3150" height="170" border="0" cellspacing="0" cellpadding="0">

  <tr bgcolor="#00FF00">

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

  </tr>

</table>

	</div>

    <div id="scroll3" style="height:auto; ">

        <div style="  background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-182px 0px; float:left;  "></div>

		<div  style=" background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif);height:20px; width:660px; background-position:0px -226px; float:left;  ">

		<div id ="block3" style="background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:162px; background-position:-14px 0px; position:absolute "></div>

		</div>

		<div style=" background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-216px 0px; float:left; "></div>

    </div>

    </div>    

</body>

</html>
...全文
124 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
gkw521 2009-09-01
  • 打赏
  • 举报
 回复
学习
ahwingwu 2009-09-01
  • 打赏
  • 举报
 回复 
    <div id="scroll3" style="height:auto; ">

        <div style="  background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-182px 0px; float:left;  "></div>

        <div  style="background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:400px; background-position:0px -226px; float:left; padding-left:260px;">

        <div id ="block3" style="background:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif) -14px 0px ; height:20px; width:162px; position:absolute "></div>

        </div>

        <div style=" background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-216px 0px; float:left; "></div>

    </div>

    </div>
aperson111 2009-09-01
  • 打赏
  • 举报
 回复 
<!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=gb2312" />

<title></title>



</head>

<body style=" padding:30px; margin:0px;">

    <div id="container3" style="width:840px; height:216px;background-image:url(l.gif); border:2px solid #b50000; border-top:none;">

    <div style="height:170px; width:90%; overflow:hidden;margin:0 auto;">

    <table width="3150" height="170" border="0" cellspacing="0" cellpadding="0">

  <tr bgcolor="#00FF00">

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

  </tr>

</table>

    </div>

    <div id="scroll3" style="height:auto;"><center><table width="740"><tr>

        <td style="  background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-182px 



0px; float:left;  "></td>

        <td  style=" background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif);height:20px; width:660px; background-position:0px -



226px; float:left;  ">

        <div id ="block3" style="background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:162px; background-



position:-14px 0px; position:absolute "></div>

        </td>

        <td style=" background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-216px 



0px; float:left; "></td><t/r></table></center>

    </div>

    </div>    

</body>

</html>

看看是不是这样？
下面的放滚动条的div整个里面用个center标签，然后用table，宽度就是你整个scroll的宽度，就可以居中了。
cnn521258 2009-09-01
  • 打赏
  • 举报
 回复 


<body>

<div id="container3" style="width:840px; height:216px;background-image:url(l.gif); border:2px solid #b50000; border-top:none;">

    <div style="height:170px; width:90%; overflow:hidden;margin:0 auto;">

    <table width="3150" height="170" border="0" cellspacing="0" cellpadding="0">

  <tr bgcolor="#00FF00">

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

    <td width="210" align="center"></td>

  </tr>

</table>

    </div>

    <div id="scroll3" style="height:auto;width:90%;margin:0 auto; ">

        <div style="  background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-182px 0px; float:left;  "></div>

        <div  style=" background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif);height:20px; width:696px; background-position:0px -226px; float:left;  ">

        <div id ="block3" style="background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:162px; background-position:-14px 0px; position:absolute "></div>

        </div>

        <div style=" background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090901/095636984.p.gif); height:20px; width:30px; background-position:-216px 0px; float:left; "></div>

    </div>

    </div> 

</body>
xinyung 2009-09-01
  • 打赏
  • 举报
 回复
这样行不行？
<div id ="block3" style="left:320px;
wtcsy 2009-09-01
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 beenz 的回复:]
align
[/Quote]
你多少也测试一下吧
BeenZ 2009-09-01
  • 打赏
  • 举报
 回复
align
BeenZ 2009-09-01
  • 打赏
  • 举报
 回复 


貌似要用 style="text-aligh:center"
让popupwindow显示在view的上方并与该view水平居中对齐
让popupwindow显示在view的上方并与该view水平居中对齐
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
水平居中直接加上&amp;lt;center&amp;gt;标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法 放上示范的html代码：&amp;lt;body&amp;gt; &...
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...
CSS布局对齐方式--水平居中、垂直居中、水平垂直居中
前言：在网页布局中，经常遇到需要使元素居中对齐的时候，居中对齐的方式有：水平居中、垂直居中和水平垂直居中。这次，借此回顾总结一下，并在此记录下相关内容。 一、水平居中：  （1）行内元素的水平居中  ...
HTML 水平居中 垂直居中 垂直水平居中的几种实现方式
水平居中 方法一：在父容器上定义固定宽度，margin值设成auto &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;...
JavaScript

87,902

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章