ホームページ > ウェブフロントエンド > htmlチュートリアル > IE_html/css_WEB-ITnose での Web ページの中央表示に関する問題

IE_html/css_WEB-ITnose での Web ページの中央表示に関する問題

WBOY
リリース: 2016-06-21 09:42:11
オリジナル
1202 人が閲覧しました

IE 中央揃え

Chrome と FF ではページが中央に表示されますが、すべてのバージョンの IE では左側に表示されます
両方とも追加されていますが、他に注意する必要がある場所は何ですか?

ディスカッションへの返信 (解決策)

body, html{width:100%;height:100%;}

.center{margin:0px auto;}


body, html{width:100%;height:100 %;}

.center{margin:0px auto;}

最初の文を追加しましたが、まだ機能しません。

関連する CSS ファイルは次のとおりです:

/*---------- Base ---------*/
*{padding:0px;margin:0px;}
html {background: #FFF;}
body{font:12px Verdana,Arial,Tahoma; line-height: 1.8em; color:#999999;}
img{border:none;}

border: 1px ソリッド # CCCCCC;
パディング: 5px;
カーソル:ポインター;
a{color:#666666;text-decoration:none;}
a:hover{ 背景色:#8D900B;
.header :hover, .pagelist a:hover,.favorite a:hover,.pic a:hover,a.pic:hover{ color:#8D900B; background-color:#ffffff}
ul,li{list-style:none; }
input ,select,button{font:12px Verdana,Arial,Tahoma;vertical-align:middle;}
h1, h2, h3, h4, h5, h6 {font-family: "Microsoft YaHei";font-size: 100%; フォントの太さ: 通常;}
/*---------- 在庫 ---------*/
.center{margin:0px auto;}
.w960{width :960px; }
.wrapbox {マージン: 0 自動;幅: 960px;クリア:両方;}
.mainbox{ width:630px; オーバーフロー:hidden}
.sidebox{ width:300px;オーバーフロー:隠し }
.fl{ float:left}
.fr{ float:right}
.mt1{margin-top:8px;}
.mt2{margin-top:16px;}
.clear{overflow:hidden;クリア:両方; 高さ:1px; 行の高さ:1px;}
.fs-12{font-size:12px;}
.fc-f60{color:#F60;}
.fc-f90{color:#F90 ;}
.clr{clear:both;}
.ipt-txt{line-height:15px;padding:4px 5px;border-width:1px;border-style:solid;border-color:#ccc;font-size :12px; margin-right:2px;}
.nb{line-height:20x;padding:1px 2px;border-width:1px;border-style:solid;border-color:#666 #BBB #BBB #666; font-size :12px;margin-right:2px}
.btn-1{padding: 0px;width:56px;height:24px;border:none;background:url(../images/comm-bt.gif) no -繰り返し; 行の高さ: 25 ピクセル; 文字間隔: 1 ピクセル; カーソル: ポインター; オーバーフロー: 非表示; カラー: #585858;}
.btn-2{幅: 70 ピクセル; 高さ: 25 ピクセル; 境界線: なし; 背景: URL (.. /images/btn-bg2.gif) 左上 no-repeat;line-height:25px;overflow:hidden;color:#444;margin-right:2px;cursor:pointer;}
.header{width: 100%; overflow:hidden; margin-bottom: 10px;}
.header_top{background: url("../images/topbar.png")repeat-x スクロール 0 -8px 透明;クリア:両方;高さ:28px; line-height :26px;}
.header_top .welcome{float:left;padding-left:10px;height:26px;line-height:26px; }
.header_top a.rss{}
.header_top .toplinks{ float: right;height :26px;line-height:26px;}
.header_top .toplinks a{margin:0 2px;}
.header_top .toplinks span{margin-left:15px;}
.header .top{ /**背景:url("../images/line.gif") repeat-x scroll 左下 transparent;** / border-bottom:1px ソリッド #FAEFE3; 高さ:96px;位置: 相対;オーバーフロー: 非表示;}
.logo {高さ: 85px;幅:345px;位置:絶対;左:0;上:0}
.logo h1 a {background: url("../images/logo.gif") 繰り返しなしスクロール 0 0 透明;表示: ブロック;高さ: 85px;オーバーフロー: 非表示;テキストインデント: -9999em;幅: 345px;}
.hi{ float:left}
.userface{ float:right; margin-top:5px;}
.userface img{ border:1px Solid #dddddd;}
.userface a:hover{ Background:none ;}
.userface a:hover img{ border:1px Solid #8D900B}
.mylink{ float:left}
.mylink li{ float:left}

HTML の完全なコードを投稿してください

それ以外の場合は、これを試してください:

body{ text-align:center; }

.center{ margin:0 auto;

要不然你试试这个:
body{ text-align:center; }
.center{ margin:0 auto; text-align:left; }
这个倒是居中了,但所有文本也居中了

再为不需要居中的设置text-align:left;不就行了?

很多标签啊,都要设岂不是太麻烦了?

很多标签啊,都要设岂不是太麻烦了?
你把完整的HTML代码贴出来呀,你之前贴的不完整

引用 8 楼 crazyzyc 的回复:很多标签啊,都要设岂不是太麻烦了?
你把完整的HTML代码贴出来呀,你之前贴的不完整

这个是Header.html的代码

<!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><title><?=$headtitle?></title><?=$headmeta?><?=$cache_settings['headcontent']?><link href="<?=$_SYS['TP']?>/css/index.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/js/util.js"></script><script type="text/javascript" src="/js/popwin.js"></script><script type="text/javascript" src="/js/ajax.js"></script><script type="text/javascript" src="/js/post.js"></script><script type="text/javascript" src="/js/user.js"></script><script type="text/javascript" src="/js/choosedate.js"></script><script type="text/javascript" src="/js/jquery.js"></script></head><body><div class="header_top">  <div class="wrapbox"> <span class="welcome">Hi,欢迎光临:<a href="/"></a> <a href="{dede:global.cfg_basehost/}" onClick="window.external.addFavorite(this.href,this.title);return false;" title="" rel="sidebar">收藏我们</a></span>    <div class="toplinks"><span id="_userlogintop" >    <?  	if(!isLogin()){    ?>    <a href="/login.php">[请登录]</a> <a href="/signup.php">[免费注册]</a> </span>     <?}else{?>    	<a href="/mycenter.php"><?=$lg['displayname']?></a>,欢迎回来! <?=$msg_link?><a href="/logout.php"><span class="cheng12l">[退出]</span></a>    <?}?>     <a href="/">首页</a> | <a href="/mycenter.php">会员中心</a> | <a href="/mytasklist.php?type=bm"> 我的代言</a> | <a href="/myactlist.php?type=bm">我的活动</a> | <a href="/single.php?id=6">帮助</a>    </div>  </div></div><div class="header">  <div class="wrapbox top">    <div class="logo">      <h1><a title="首页" href="/">{dede:global.cfg_webname/}</a> </h1>    </div>    <div id="navMenu">      <ul>        <li class="hover"><a href='/'>首页</a></li>        <li><a href='newlist.php'>新闻</a></li>        <li><a href='club.php'>俱乐部</a></li>        <li><a href='bbs.php'>论坛</a></li>      </ul>    </div>    <!--<div class="ico-hot"></div>-->   </div></div>
ログイン後にコピー

哦,你这个代码里找不到.center啊,
估计应该是由JS或PHP动态生成的。
你能把动态生成的代码贴上来吗?(可以通过浏览器的开发者工具得到动态生成的HTML)

刚看了下,浏览器的浏览源文件里也没有.center,我把.center改成 body,还是不行,应该改哪里啊?

你到底要哪部分居中?至少哪个要居中的DIV,要设置width比如996px,然后加margin:0 auto;要不全部都默认width 100%,当然不会居中罗。

相对文件必须要有个宽度

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート