版面置中CSS調整問題 - 部落格
By Freda
at 2015-05-26T20:13
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
}
--
但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
}
--
Tags:
部落格
All Comments
By Bennie
at 2015-05-29T05:16
at 2015-05-29T05:16
By Jack
at 2015-06-02T02:35
at 2015-06-02T02:35
Related Posts
分享心得恐挨罰 部落客批白色恐怖
By Leila
at 2015-05-25T13:21
at 2015-05-25T13:21
噗浪無法連線?
By Selena
at 2015-05-24T19:25
at 2015-05-24T19:25
在文章間顯示廣告的數量太多
By Genevieve
at 2015-05-22T03:17
at 2015-05-22T03:17
請問如何安裝上下一篇+標題插件?
By Faithe
at 2015-05-22T00:00
at 2015-05-22T00:00
手機電腦版模式 版面無法正常顯示
By Hazel
at 2015-05-21T20:28
at 2015-05-21T20:28