Почему мой центр страницы не выравнивается?!
Это мой первый вопрос о переполнении стека, но я узнал все, что знаю, с этого замечательного сайта, поэтому я надеюсь, что вы сможете помочь...
У меня очень простая домашняя страница, которая просто отказывается выравнивать по центру. В основном это просто фоновые изображения и нечетный фрагмент текста с ползунком изображений Wow Slider в середине (бесплатная версия). Я попытался установить поле 0 auto для контейнера div (table_01), body, отдельного контейнера div (теперь удаленного в отчаянии) и других вещей. Div-align: центр не будет работать, и я вертелся, пока мои пальцы не кровоточат безуспешно. 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>house</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="homestyle.css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body>
<div id="Table_01">
<div id="home-01_">
<img id="home_01" src="images/home_01.png" width="255" height="194" alt="" />
</div>
<div id="home-02_">
<p> Your qualifications and whatnots can go in here, or if you'd prefer I can put a tagline like "All aspects of construction and landscaping tackled"....</p>
</div>
<div id="commentbar">
<p class="comslide">Scrolling comments will go here (they scroll every twenty seconds so that customers can see how great your buildings are....)</p> </div>
<div id="home-04_" class="topbar">
<a href="CHANGE THIS TO HOME LINK">Home</a></div>
<div id="home-05_" class="topbar">
<a href="CHANGE THIS TO SERVCIES LINK">Services</a>
</div>
<div id="home-06_">
<img id="home_06" src="images/home_06.png" width="2" height="70" alt="" />
</div>
<div id="home-07_" class="topbar">
<a href="CHANGE THIS TO GALLERY LINK">Gallery</a>
</div>
<div id="home-08_">
<img id="home_08" src="images/home_08.png" width="1" height="70" alt="" />
</div>
<div id="home-09_" class="topbar">
<a href="CHANGE THIS TO CONTACT LINK">Contact</a>
</div>
<div id="home-10_">
<img id="home_10" src="images/home_10.png" width="2" height="726" alt="" />
</div>
<div id="home-11_">
<img id="home_11" src="images/home_11.png" width="551" height="28" alt="" />
</div>
<div id="home-12_">
<img id="home_12" src="images/home_12.png" width="239" height="28" alt="" />
</div>
<div id="home-13_">
<img id="home_13" src="images/home_13.png" width="225" height="28" alt="" />
</div>
<div id="home-14_">
<img id="home_14" src="images/home_14.png" width="168" height="76" alt="" />
</div>
<div id="home-15_"><!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/raised_bed.jpg" alt="raised bed" title="raised bed" id="wows1_0"/></li>
<li><img src="data1/images/steps.jpg" alt="steps" title="steps" id="wows1_1"/></li>
<li><img src="data1/images/fence.jpg" alt="fence" title="fence" id="wows1_2"/></li>
<li><img src="data1/images/extension.jpg" alt="extension" title="extension" id="wows1_3"/></li>
<li><img src="data1/images/garden_wall.jpg" alt="garden_wall" title="garden_wall" id="wows1_4"/></li>
<li><img src="data1/images/wall.jpg" alt="wall" title="wall" id="wows1_5"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Raised Bed"><img src="data1/tooltips/raised_bed.jpg" alt="Raised Bed"/>1</a>
<a href="#" title="Steps and Paving"><img src="data1/tooltips/steps.jpg" alt="steps"/>2</a>
<a href="#" title="Fencing"><img src="data1/tooltips/fence.jpg" alt="fence"/>3</a>
<a href="#" title="Extensions"><img src="data1/tooltips/extension.jpg" alt="extension"/>4</a>
<a href="#" title="Garden walls"><img src="data1/tooltips/garden_wall.jpg" alt="garden_wall"/>5</a>
<a href="#" title="and all forms of Bricklaying"><img src="data1/tooltips/wall.jpg" alt="wall"/>6</a>
</div></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section --></div>
<div id="home-16_">
<img id="home_16" src="images/home_16.png" width="168" height="76" alt="" />
</div>
<div id="home-17_">
<img id="home_17" src="images/home_17.png" width="57" height="580" alt="" />
</div>
<div id="home-18_">
<img id="home_18" src="images/home_18.png" width="56" height="57" alt="" />
</div>
<div id="home-19_">
<img id="home_19" src="images/home_19.png" width="55" height="184" alt="" />
</div>
<div id="home-20_">
<img id="home_20" src="images/home_20.png" width="54" height="184" alt="" />
</div>
<div id="home-21_">
<img id="home_21" src="images/home_21.png" width="60" height="57" alt="" />
</div>
<div id="home-22_">
<img id="home_22" src="images/home_22.png" width="54" height="580" alt="" />
</div>
<div id="home-23_">
<img id="home_23" src="images/home_23.png" width="56" height="127" alt="" />
</div>
<div id="home-24_">
<img id="home_24" src="images/home_24.png" width="60" height="127" alt="" />
</div>
<div id="home-25_">
<img id="home_25" src="images/home_25.png" width="682" height="47" alt="" />
</div>
<div id="home-26_">
<img id="home_26" src="images/home_26.png" width="28" height="396" alt="" />
</div>
<div id="home-27_"><p>This box will contain an "add a comment" thing. Every time someone adds a comment you will get an email asking you if you want it to appear on the top bit of the page.</p></div>
<div id="home-28_">
<img id="home_28" src="images/home_28.png" width="184" height="220" alt="" />
</div>
<div id="home-29_"><p> And this one is your basic "About me" box. Please write up a basic description of who you are and the services you offer so that I can stick it in here. For the record, the two little trucks link to your facebook and twitter accounts (I'll make you an LRC account for both) and if users click the envelope in the middle then their mail program will pop up with your email adress already in the send to box. There's a white outline on them atm but that'll be gone as soon as my photoshop works properly again.</p> </div>
<div id="home-30_">
<img id="home_30" src="images/home_30.png" width="29" height="296" alt="" />
</div>
<div id="home-31_">
<img id="home_31" src="images/home_31.png" width="298" height="211" alt="" />
</div>
<div id="home-32_">
<img id="home_32" src="images/home_32.png" width="42" height="176" alt="" />
</div>
<div id="home-33_">
<a href="mailto:">
<img id="mail" src="images/Email.png" width="145" height="158" alt="Click to email" /></a>
</div>
<div id="home-34_">
<img id="home_34" src="images/home_34.png" width="365" height="35" alt="" />
</div>
<div id="home-35_">
<img id="home_35" src="images/home_35.png" width="365" height="41" alt="" />
</div>
<div id="home-36_">
<img id="home_36" src="images/home_36.png" width="110" height="100" alt="" />
</div>
<div id="home-37_">
<a href="CHANGE THIS TO FB ADDRESS" target="blank">
<img src="images/truck_37.png" width="109" height="73" alt="" /></a>
</div>
<div id="home-38_">
<img id="home_38" src="images/home_38.png" width="59" height="100" alt="" />
</div>
<div id="home-39_">
<a href="CHANGE THIS TO FB ADDRESS" target="blank">
<img src="images/truck_39.png" alt="" />
</a>
</div>
<div id="home-40_">
<img id="home_40" src="images/home_40.png" width="116" height="29" alt="" />
</div>
<div id="home-41_">
<img id="home_41" src="images/home_41.png" width="109" height="27" alt="" />
</div>
<div id="home-42_">
<img id="home_42" src="images/home_42.png" width="145" height="18" alt="" />
</div>
</div id="Table_01">
<!-- End Save for Web Slices -->
</body>
</html>
и таблица стилей выглядит так:
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Roboto Condensed', sans-serif;
}
a:link {
color:#db6748;
text-decoration:none;
font-size:18px
font-family: 'Roboto Condensed', sans-serif;
}
a:visited {
color:#8f3821;
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:1020px;
height:920px;
z-index:1;
margin:0 auto;
padding:0;
text-align:center;
}
#home-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}
#home-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
background-image:url(images/home_02.png);
}
#commentbar {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
border-top:dotted;
border-color:#666;
background-image:url(images/home_03.png);
}
#home-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
background-image:url(images/home_04.png);
}
.topbar {
font-size:24px;
border-top:dotted;
border-color:#333;
}
.comslide{
position:absolute;
vertical-align:middle;;
color:#CCC;
}
.topbar a:link {color:#d5d5d5;}
.topbar a:hover { color:#999;}
#home-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
background-image:url(images/home_05.png);
}
#home-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:70px;
}
#home-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
background-image:url(images/home_07.png)
}
#home-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:70px;
}
#home-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
background-image:url(images/home_09.png)
}
#home-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}
#home-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:28px;
}
#home-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:28px;
}
#home-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:28px;
}
#home-14_ {
position:absolute;
left:0px;
top:264px;
width:168px;
height:76px;
}
#home-15_ {
position:absolute;
left:168px;
top:264px;
width:682px;
height:213px;
z-index:1;
background-image:url(images/home_15.png);
}
#home-16_ {
position:absolute;
left:850px;
top:264px;
width:168px;
height:76px;
}
#home-17_ {
position:absolute;
left:0px;
top:340px;
width:57px;
height:580px;
}
#home-18_ {
position:absolute;
left:57px;
top:340px;
width:56px;
height:57px;
}
#home-19_ {
position:absolute;
left:113px;
top:340px;
width:55px;
height:184px;
}
#home-20_ {
position:absolute;
left:850px;
top:340px;
width:54px;
height:184px;
}
#home-21_ {
position:absolute;
left:904px;
top:340px;
width:60px;
height:57px;
}
#home-22_ {
position:absolute;
left:964px;
top:340px;
width:54px;
height:580px;
}
#home-23_ {
position:absolute;
left:57px;
top:397px;
width:56px;
height:127px;
}
#home-24_ {
position:absolute;
left:904px;
top:397px;
width:60px;
height:127px;
}
#home-25_ {
position:absolute;
left:168px;
top:477px;
width:682px;
height:47px;
}
#home-26_ {
position:absolute;
left:57px;
top:524px;
width:28px;
height:396px;
}
#home-27_ {
position:absolute;
left:85px;
top:524px;
width:298px;
height:185px;
background-image:url(images/home_27.png);
}
#home-28_ {
position:absolute;
left:383px;
top:524px;
width:184px;
height:220px;
}
#home-29_ {
position: absolute;
left: 568px;
top: 525px;
width: 368px;
height: 220px;
background-image:url(images/home_29.png);
}
#home-30_ {
position:absolute;
left:935px;
top:524px;
width:29px;
height:296px;
}
#home-31_ {
position:absolute;
left:85px;
top:709px;
width:298px;
height:211px;
}
#home-32_ {
position:absolute;
left:383px;
top:744px;
width:42px;
height:176px;
}
#home-33_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/home_33.png)
}
#home-34_ {
position:absolute;
left:570px;
top:744px;
width:365px;
height:35px;
}
#home-35_ {
position:absolute;
left:570px;
top:779px;
width:365px;
height:41px;
}
#home-36_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}
#home-37_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
background-image:url(images/home_37.png);
}
#home-38_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}
#home-39_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
background-image:url(images/home_39.png);
}
#home-40_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}
#home-41_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}
#home-42_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}
#higher {
position:absolute;
top: 0px;
width:682px;
height:213px;
}
#page-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}
#page-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
}
#page-03_ {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
}
#page-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
}
#page-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
}
#page-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:75px;
}
#page-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
}
#page-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:75px;
}
#page-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
}
#page-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}
#page-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:33px;
}
#page-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:33px;
}
#page-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:33px;
}
#page-14_ {
position:absolute;
left:0px;
top:269px;
width:57px;
height:651px;
}
#page-15_ {
position:absolute;
left:57px;
top:269px;
width:907px;
height:455px;
}
#page-16_ {
position:absolute;
left:964px;
top:269px;
width:54px;
height:651px;
}
#page-17_ {
position:absolute;
left:57px;
top:724px;
width:907px;
height:20px;
}
#page-18_ {
position:absolute;
left:57px;
top:744px;
width:368px;
height:176px;
}
#Email_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/Emailbg.png);
}
#page-20_ {
position:absolute;
left:570px;
top:744px;
width:394px;
height:76px;
}
#page-21_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}
#page-22_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
}
#page-23_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}
#page-24_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
}
#page-25_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}
#page-26_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}
#page-27_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}
Другая таблица стилей просто форматирует слайдер - я попытался отсоединить его, чтобы увидеть, будет ли страница выравниваться по центру, но без радости. Есть идеи? Я добавлю код для другой таблицы стилей, если вам это нужно.
Спасибо
Най
3 ответа
Рабочая демонстрация на JS Bin.
Следующее правило необходимо изменить:
#Table_01 {
position: relative;
width:1020px;
height:920px;
z-index:1;
margin:0 auto;
padding:0;
text-align:center;
}
Ваш #Table_01 никогда не будет выравнивать центр, потому что его позиция установлена на абсолютное с левым и верхним 0. Удаление этих значений будет началом...
Вы должны удалить каждый position: absolute, left: *px а также top:*px атрибуты, затем настройте width: из #Table_01, Это создано каким-то генератором?? Этот код выглядит очень некрасиво...