我花了一点时间为项目创建一个新的导航菜单。我在我的CSS文件中使用了浮动元素，这似乎是保持导航菜单保持其外观的一个重要因素。但是目前导航菜单的对齐关闭了，我的目标是让它在视图中居中。使用JSP和CSS文件浮动对齐

header {

background: #3d4144 url("../img/bg.png") 0 0 repeat;

border-bottom: 5px solid #ddd;

height: 170px;

padding-top: 15px;

}

#title {

color: white;

display: block;

letter-spacing: 2px;

margin-left: 50px;

padding: 20px;

position: relative;

text-align: left;

}

#headerMessage {

color: white;

display: block;

letter-spacing: 2px;

padding: 20px;

position: relative;

text-align: center;

}

.container {

margin: 0 auto;

width: 540px;

}

#navHeader {

-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);

background: #464b4c;

background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);

background-image: -moz-linear-gradient(top, #464b4c, #3f4344);

background-image: -o-linear-gradient(top, #464b4c, #3f4344);

background-image: linear-gradient(to bottom, #464b4c, #3f4344);

border-top: 1px solid #353939;

border-bottom: 1px solid #2e3131;

box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);

height: 36px;

}

#navHeader a {

-webkit-transition: 0.1s ease-out;

-moz-transition: 0.1s ease-out;

-o-transition: 0.1s ease-out;

transition: 0.1s ease-out;

-webkit-transition-property: background-color, line-height;

-moz-transition-property: background-color, line-height;

-o-transition-property: background-color, line-height;

transition-property: background-color, line-height;

text-align: center;

}

#navHeader #navHeaderUL {

float: left;

border-left: 1px solid #353939;

border-left: 1px solid rgba(0, 0, 0, 0.2);

border-right: 1px solid #4d5354;

border-right: 1px solid rgba(255, 255, 255, 0.06);

}

#navHeader li {

float: left;

}

#navHeader a {

display: block;

padding: 0 20px;

line-height: 36px;

color: #ddd;

text-decoration: none;

text-shadow: 0 -1px #2e3131;

border-left: 1px solid #4d5354;

border-left: 1px solid rgba(255, 255, 255, 0.06);

border-right: 1px solid #353939;

border-right: 1px solid rgba(0, 0, 0, 0.2);

cursor: pointer;

}

#navHeader a:hover {

background: #4d5354;

background: rgba(255, 255, 255, 0.05);

}

#navHeader li.active a,

#navHeader li.active a:hover,

#navHeader a:active {

padding: 0 21px;

line-height: 33px;

color: #eee;

background: #323637;

border-left: 0;

border-right: 0;

border-bottom: 3px solid #48a9c0;

background-image: -webkit-linear-gradient(top, #484e4f, #323637);

background-image: -moz-linear-gradient(top, #484e4f, #323637);

background-image: -o-linear-gradient(top, #484e4f, #323637);

background-image: linear-gradient(to bottom, #484e4f, #323637);

-webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);

box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);

}

#navHeader li.green a,

#navHeader li.green a:active {

border-bottom-color: #56c93d;

}

#navHeader li.red a,

#navHeader li.red a:active {

border-bottom-color: #a54e49;

}

#navHeader li.purple a,

#navHeader li.purple a:active {

border-bottom-color: #c052b9;

}

#navHeader li.yellow a,

#navHeader li.yellow a:active {

border-bottom-color: #c0bb30;

}

Insert Title

INSERT MESSAGE!

2017-08-11

Brenton