版面置中CSS調整問題 - 部落格

Freda avatar
By Freda
at 2015-05-26T20:13

Table of Contents

我想把部落格版面置中
但container改成 margin 0 auto
版面卻向上方及左邊靠齊
google很久研究不出所以然
想請問需要改哪裡才能將版面置中
附上CSS 非常感謝

/* 7277 : Tue, 03 Jun 2014 17:26:17 +0800 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}

table {
border-collapse:collapse;
border-spacing:0;
}

address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:noral;
}

ol,ul {
list-style:none;
}

caption,th {
text-align:left;
}

h1,h2,h3,h4,h5,h6 {
font-size:120%;
font-weight:normal;
}

q:before,q:after {
content:'';
}

pre {
font-size:1em;
}

.article-content {
_height:1%;
overflow:hidden;
_overflow:none;
line-height:1;
color:#808080;
}


.article-content p {
margin-bottom:1em;
}

br {
letter-spacing:normal;
}

img {
vertical-align:middle;
}

body {
background:#fff;
position:relative;
font-size:14px;
color:#808080;
line-height:180%;
font-family:Microsoft JhengHei;
background-image:url(none);
background-color:#fff;
background-position:undefined;
}

a {
text-decoration:none;
color:#666;
}

#authority {
line-height:200px;
padding-left:60px;
}

#authority a {
background:#eee;
display:inline;
margin-right:5px;
padding:2px 5px;
}

#container {
margin:60px 150px;
}

#header {
height:160px;
position:relative;
background-position:right;
background-repeat:repeat;
}

#login-bar {
font-size:12px;
color:#747474;
text-align:right;
}

#banner h1 {
font-weight:bold;
font-size:20px;
margin-bottom:20px;
}

#banner h2,#banner #blog-category {
font-size:12px;
color:#666;
}

#navigation {
margin-top:12px;
}

#navigation li {
display:inline;
float:left;
}

#navigation li a {
border-right:1px dotted #333;
color:#333;
padding:0 5px;
}

#navigation li a:hover {
color:#b33;
}

li#link-album a {
padding-left:0;
}

#main {
_height:1%;
overflow:hidden;
}

#content {
width:650px;
float:left;
display:inline;
}

#spotlight {
border:1px #666;
padding:5px;
}

#spotlight h5 {
background:;
color:#fff;
display:inline;
padding:2px 5px;
}

#spotlight-text {
margin-top:5px;
}

.article {
border-bottom:1px #ccc dotted;
padding-bottom:20px;
margin:50px 0;
}

.article-head {
margin-bottom:10px;
}

.publish {
background:#ffffff;
line-height:10px;
font-size:12px;
display:inline;
color:#666;
padding:2px 5px;
}

.title {
padding-top:10px;
}
.title a {
font-size:18px;
color:#db7093;
font-weight:bold;
}

.article-footer {
border:1px solid #ddd;
margin-top:15px;
overflow:hidden;
padding:10px;
}

.main-list table {
width:100%;
margin-bottom:10px;
}

.main-list th {
color:#000;
font-weight:bold;
padding:3px;
}

.user-post-box {
position:relative;
margin-bottom:10px;
}

.user-post-title {
background:#eee;
color:#696969;
line-height:28px;
height:28px;
padding:2px 10px;
}

.single-post {
border-bottom:1px dotted #ddd;
position:relative;
min-height:90px;
_height:90px;
color:#666;
padding:5px;
}

.post-photo {
position:absolute;
right:10px;
top:5px;
}

.post-photo img {
width:50px;
height:50px;
border:2px #ddd solid;
}

#comment-box .post-text {
width:80%;
}

.reply-text {
border:#eee 1px solid;
color:#333;
margin:5px 0;
padding:5px;
}

.single-post.secret {
min-height:30px;
}

#trackback-box #trackback-url {
position:absolute;
right:5px;
top:5px;
}

#trackback-box input {
height:22px;
}

#trackback-box input#trackback-input {
height:18px;
width:350px;
}

#comment-form {
margin-top:10px;
}

#comment-form table th {
width:100px;
text-align:left;
vertical-align:top;
}

#comment-form input.radio {
width:25px;
}

#comment-form input#send-comment {
width:80px;
height:20px;
background:#ddd;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
}

#comment-form textarea {
width:100%;
height:150px;
}

.page {
margin-top:15px;
text-align:right;
}

.page a {
margin-left:10px;
font-size:12px;
}

#links {
width:300px;
float:right;
display:inline;
}

.box {
margin-bottom:15px;
}

.box-title {
background:#ffffff;
color:#696969;
border-bottom:1px dotted #666;
margin-bottom:15px;
padding:2px 5px;
}

#calendar table {
width:80%;
text-align:center;
font-size:12px;
margin:0 auto;
}

#calendar th {
text-align:center;
color:#000;
font-weight:bold;
}

#calendar td {
text-align:center;
}

#visitor li,#crumb li {
float:left;
margin:3px;
}

#visitor li img,#crumb li img {
width:40px;
height:40px;
}

#broadcast ul {
height:45px;
width:230px;
overflow:hidden;
margin:5px 0;
}

#broadcast li {
line-height:20px;
}

#broadcast .broadcast-photo {
float:left;
margin-right:5px;
}
#search ul {
height:30px;
}

#search li {
float:left;
margin-right:5px;
display:inline;
}

#search input#search-submit {
background:#ddd;
height:18px;
border:none;
color:#666;
padding:1px 6px;
}

#user-info dd {
margin:0!important;
}

#footer {
text-align:center;
padding:30px 0;
}

#footer a {
margin-right:5px;
}

#header h2 {
color:#666;
font-size:12pt;
}

fieldset,img,abbr,acronym {
border:0;
}

a:hover,#banner h1 a,#blog-category a,.title a:hover,.post-info,.page a:hover,#calendar td b,#calendar td a:hover {
color:#b00;
}

#banner h1 a:hover,#calendar th a {
color:#000;
}

#banner .skiplink,.post-comment,#comment-form h4 {
display:none;
}

.author,.author a,#comment-form p {
text-align:right;
}

.history,.refer {
width:48%;
float:left;
}

.back-to-top,#visitor .box-more,#crumb .box-more {
clear:both;
}

.main-list td,#comment-form table td {
padding:3px;
}

#comment-form table,#comment-form input {
width:100%;
}

.page SPAN,#calendar td a {
background:#eee;
color:#666;
padding:1px 6px;
}

#visitor ul,#crumb ul,#search .box-text {
overflow:hidden;
}

#header h1 a,#header h1 a:link,#header h1 a:visited,#header h1 a:hover,#header h1 a:active,#header h1 a,#header h1 a:link,#header h1 a:visited,#header h1 a:hover,#header h1 a:active {
color:#008b8b;
}
.recommended-posts3 {display:none;}
#content.recommeded-posts{display:none;}
#links-row-1{margin-top:-0px}

.fbbox{background: url("http://pic.pimg.tw/typixnet/1380235727-68474398.png") no-repeat scroll left center transparent !important;display:block;float:right;padding: 0 5px 0 46px;width:292px;height:270px;right:-297px;top:5%;z-index: 99999;position:fixed;}
.fbbox div{border:none;position:relative;display:block;}
.fbbox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position:absolute;right: 6px;text-align:right;z-index:99999;}
.fbbox span a{color:#808080;text-decoration:none;}
.fbbox span a:hover{text-decoration:underline;}

.modal-footer{display: none;}

.idle-adsense{display: none;}

.idle-related-posts{display: none;}

.modal-dialog{top: 50% !important; margin-top: -100px !important;}

img{
max-width:100%;
height:auto;
}

#container3{
margin: 10 auto;
width:1000px
}

--

All Comments

Bennie avatar
By Bennie
at 2015-05-29T05:16
可能沒有關聯... 不過發現你的 #container3 這邊
寫錯了, 那個 10 應該要寫成 10px
Jack avatar
By Jack
at 2015-06-02T02:35
Google搜 [痞客邦 PIXNET 面版樣式(CSS) 設定]
搜 [隨意窩 Xuite 面版樣式(CSS) 設定]

分享心得恐挨罰 部落客批白色恐怖

Leila avatar
By Leila
at 2015-05-25T13:21
※ [本文轉錄自 Gossiping 看板 #1LOh5Vqp ] 作者: f14mp5 (居隱) 看板: Gossiping 標題: [新聞] 分享心得恐挨罰 部落客批白色恐怖 時間: Mon May 25 13:21:18 2015 這是聯合報網址: http://udn.com/news/stor ...

噗浪無法連線?

Selena avatar
By Selena
at 2015-05-24T19:25
https://www.plurk.com/ 無法正常連線,多試幾次還會出現 http://i.imgur.com/m1TNHJ8.png 第一次看到這個訊息XD - ...

在文章間顯示廣告的數量太多

Genevieve avatar
By Genevieve
at 2015-05-22T03:17
我想在 blogger 的左邊,上面,文章間各放一個廣告 根據「在您的文章間顯示廣告」這篇教學完成後 https://support.google.com/blogger/answer/72821 廣告總量變成左邊一個,上面一個,文章間三個 明明教學裡寫 「請注意,根據 AdSense 政策的限制, ...

請問如何安裝上下一篇+標題插件?

Faithe avatar
By Faithe
at 2015-05-22T00:00
請問有辦法在Blogger的內文裡,安裝上一篇和下一篇,然後有標題的插件嗎? 嘗試用網路上找到的一些方法,好像因為是舊版的CSS, 所以無法使用,找不到對應的插入語法區/__\ 想請問有沒有針對新版的Blogger?T_T 先感謝大家的解惑...... - ...

手機電腦版模式 版面無法正常顯示

Hazel avatar
By Hazel
at 2015-05-21T20:28
想請問大大們 之前在調整了幾次CSS 不知道是哪裡調整錯誤 電腦看部落格版面是正常顯示 但手機看電腦版卻整個擠在一側 想請問是哪裡有問題 能在調整回來 部落格 http://luvtsi323.pixnet.net/blog 感謝先!! -- FB www.facebook.com/miaoxseoul 部 ...