html在页面最中心,html – 如何在页面中心定位标题

嗨我想把我的标题放在页面中间,我有两个标识,需要放在标题的两边.我试过text-align：center和even margin：0px auto这些都没有用吗？是我的布局需要改变吗？或者我的CSS中缺少什么？

我的代码在下面,或者您可以查看jsFiddle

我喜欢任何关于如何解决这个问题的建议以及将来在做这件事时应该记住的任何事情

的index.html

Website Service

CSS / style.css文件

@charset“utf-8”;

/ * CSS文件* /

/********************************

* CSS Reset *

*********************************/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {

display: block;

}

body {

height:100%;

line-height: 1;

background-color:#EEEEEE;

font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/********************************

* Main Styles *

*********************************/

#wrapper {

height:100%

}

header {

background: #062141; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA2MjE0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzBmMmY0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

background: -moz-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#062141), color-stop(25%,#0f2f4e), color-stop(62%,#2b5878), color-stop(99%,#2b5878)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* IE10+ */

background: linear-gradient(to bottom, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#062141', endColorstr='#2b5878',GradientType=0 ); /* IE6-8 */

height:100px;

width:auto;

}

header h1 {

text-align:center;

margin:0px auto;

font-size:42px;

color:white;

font-family:"ufonts com perpetua 2";

display:inline-block;

}

.maincontent {

height:600px;

}

#sjplogo {

float:left;

}

#sslogo {

float:right;

}

footer {

background: #062141; /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA2MjE0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzBmMmY0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzJiNTg3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

background: -moz-linear-gradient(top, #062141 0%, #0f2f4e 25%, #2b5878 62%, #2b5878 99%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#062141), color-stop(25%,#0f2f4e), color-stop(62%,#2b5878), color-stop(99%,#2b5878)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* IE10+ */

background: linear-gradient(to bottom, #062141 0%,#0f2f4e 25%,#2b5878 62%,#2b5878 99%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#062141', endColorstr='#2b5878',GradientType=0 ); /* IE6-8 */

height:100px;

postion:absoutle;

bottom:0;

}