如何将下拉菜单栏居中？

时间：2016-02-26 23:01:17

标签： html css

Quiero que se mantenga la barra tal y como esta，pero que las tres opcionesdelmenú（junto con la desplegable）pasen a estar al centro delapágina。
翻译 我希望栏保持这样，但三个菜单选项（以及下拉列表）传递位于页面的中心。

帮助。

!!!该页面有一些img（包括de菜单栏），不包括在内。

header, footer, aside, nav, article {
    display: block;
}

header h1{
	color: #670C15;
	text-align: center;
}

body {
    margin: 0 auto;
    width: 940px;
    font: 13px/22px Helvetica, Arial, sans-serif;
    background: #f5f5f1;
}
h1 {
    font-size: 28px;
    line-height: 30px;
    padding: 10px 0;
}
h2 {
    font-size: 23px;
    line-height: 25px;
    padding: 10px 0;
}
h3 {
    font-size: 18px;
    line-height: 20px;
    padding: 11px 0;
}
p {
    padding-bottom: 22px;
}

nav {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: url("nav_background.png");
}



nav ul {
    padding: 0; 
    margin: 0; 
}

nav ul:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

/********************************/
nav li { 
    position: relative; 
    float: left;  
    list-style-type: none;
    margin: 0 auto;
}

nav li a { 
    display: block; 
    padding: 10px 20px; 
    border-left: 1px solid #999; 
    border-right: 1px solid #222; 
    color: #777; 
    text-decoration: none;
}

nav li a:focus { 
    outline: none; 
    text-decoration: underline; 
}

nav li:first-child a { 
    border-left: none; 
}


nav li:hover ul { 
    display:block; 
}

nav a span { 
    display: block; 
    float: right; 
    margin-left: 5px; 
}
nav ul ul { 
    display: none; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    background: #670C15;
}

/******************************/
nav ul ul li { 
    float: none; 
}
nav ul ul a { 
    padding: 5px 10px; 
    border-left: none; 
    border-right: none; 
    font-size: 14px; 
}
nav ul ul a:hover { 
	color: #fff;
}
nav ul li a:hover {
    color: #fff;
}

nav ul a span {
	-moz-transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
    transform: rotate(-180deg);
}

#intro {
	position: relative;
	margin-top: 66px;
	padding: 44px;
	background: #467612 url("intro_background.png") repeat-x;
	border-radius: 170px 50px;
}
#intro img {
	position: absolute;
	top: 0;
	right: 0;
	width: 470px;
	height: 100%;
	border-radius: 170px 50px;
}
#intro h2 {
	position: relative;
	z-index: 9999;
	width: 600px;
	padding: 0 0 0 0;
	font-weight: bold;
}
#intro p {
	position: absolute;
	top: 0;
	right: 0;
	padding: 3% 0 0 0;
	width: 400px;
	z-index: 9999;
	font-weight: bold;
}
#contenido {
	display: table;
}
#contenidoPrincipal {
	display: table-cell;
	width: 620px;
	padding-right: 22px;
}
aside {
	display: table-cell;
	width: 300px;
}

 .blogPost div {
   column-count: 2;
   column-gap: 22px;
   -moz-column-count: 2;  
   -moz-column-gap: 22px;
   -webkit-column-count: 2;
   -webkit-column-gap: 22px;
}

 .blogPost img {
	margin: 22px 0;
	box-shadow: 3px 3px 7px #777;
	width: 100%;
 }
 
#comentarios {
   margin-top: 21px;
   padding-top: 22px;
   border-top: 1px solid #d7d7d7;
}
 #comentarios article {
       display: table;
       padding: 22px;
   }
section#comentarios article:nth-child(2n+1) {
   padding: 21px;
   background: #E3E3E3;
   border: 1px solid #d7d7d7;
   border-radius: 11px;
}

#comentarios article header {
  display: table-cell;
  width: 220px;
  padding-right: 22px;
}
 #comentarios article header a {
   display: block;
   font-weight: bold;
   color: #000;
}
 #comentarios article header a:hover {
   text-decoration: none;
}
 #comentarios article p {
   padding: 0;
}
form {
   margin-top: 21px;
   padding-top: 22px;
   border-top: 1px solid #d7d7d7;
}
 form p {
   display: table;
   margin-bottom: 22px;
   padding: 0 22px;
}
 form label {
   display: table-cell;
   width: 140px;
   padding-right: 20px;
   text-align: right;
   font-weight: bold;
   vertical-align: top;
}
 form input[type="text"], form input[type="email"], form input[type="url"] {
   display: table-cell;
   width: 300px;
   height: 20px;
   border: 1px solid #d7d7d7;
}
 form textarea {
   width: 300px;
   height: 100px;
   border: 1px solid #d7d7d7;
}
 form input[type="submit"] {
   margin-left: 162px;
}

aside section {
	margin: 22px 0 0 22px;
	padding: 11px 22px;
	background: url("sidebar_section_background.png") repeat-x;
}
aside section ul {
	margin: 0 0 0 22px;
	list-style: none;
}
aside section ul li a {
	display: block;
	text-decoration: none;
	color: #000;
}
aside section ul li a: hover {
	text-decoration: underline;
}
footer {
    position: absolute;
    left: 0;
    width: 100%;
    background: #681E1E;
}
footer div {
    display: table;
    margin: 0 auto;
    padding: 44px 0;
    width: 940px;
    color: #777;
}
footer div section {
    display: table-cell;
    width: 300px;
}
footer div #acerca, footer div #otrosBlogs {
    padding-right: 20px;
}
    
footer h3 {
    color: #FFF;
}
footer a {
    color: #999;
}
footer a:hover {
    color: #FFF;
    text-decoration: none;
}
footer ul {
    margin: 0 0 0 40px;
    list-style: square;
    color: #565656;
}
    
footer ul li a {
    display: block;
}

form p label{
	color: #914F56;
}
<!doctype html>
<html>
	<head id="titulo">
        <title>T&iacute;tulo de P&aacute;gina</title>
        <link rel="stylesheet" href="estiloexpe.css" type="text/css" media="screen" />
    </head>

    <body>
        <header>
            <h1>T&iacute;tulo de P&aacute;gina</h1>
        </header>
        <nav>
			<ul>
				<li><a href="#" title="Inicio">Inicio</a></li>
				<li>
					<a href="#" title="Inicio">Archivo<span>^</span></a>
					<ul>
						<li> <a href="#" class="SubMenu">Submen&uacute; 1</a> </li>
						<li> <a href="#" class="SubMenu">Submen&uacute; 2</a> </li>
						<li> <a href="#" class="SubMenu">Submen&uacute; 3</a> </li>
					</ul>
				</li>
				<li><a href="#" title="Inicio">Contacto</a></li>
			</ul>	
        </nav>
		<br><br><br><br>
        <section id="intro">
			<h2>Esta es una introducci&oacute;n de prueba.</h2>
			<img src="intro_pebbles.png" alt="Image: Felixco, Inc. / FreeDigitalPhotos.net" />
			<p>Cuando todo va mal te imagino sonriendo y se me pasa. <br> Ese es mi truco y esa es tu magia.</p>
        </section>
		
		<div id="contenido">
			<div id="contenidoPrincipal">
				<section>
					<article class="blogPost">
						<header>
							<h2>T&iacute;tulo del post.</h2>
							<p> Escrito el <time datetime= "2016-02-08T09:20:45-06:00">23 de febrero de 2016
							</time> por <a href="#"> Genessis</a> - <a href="#Comentarios"> Sin comentarios </a> 
							</p>
						</header>
						<div>
							<p>Para comprender el valor de un a&ntilde;o, habla con el alumno que reprob&oacute;.
							Para comprender el valor de un mes, habla con la madre de un beb&eacute; prematuro.
							Para comprender el valor de una semana, habla con el redector de un semanario.
							Para comprender el valor de un d&iacute;a, habla con el obrero que debe alimentar seis hijos.
							</p>
							<img src="DianaDardos.jpg" alt="Image: renjith krishnan / FreeDigitalPhotos.net" />
							<p>Para comprender el valor de una hora, habla con los amantes que ans&iacute;an verse.
							Para comprender el valor de un minuto, habla con la persona que no alcanzo el tren.
							Para comprender el valor de un segundo, habla con quien sobrevivi&oacute; a un accidente.
							Para comprender el valor de una milesima de segundo, habla con quien gano medalla de plata en las olimpiadas.
							</p>
						</div>	
					</article> 
				</section>
				<section id="comentarios">
					<header>
						<h3>Comentarios</H3>
					</header>
					<article>
						<header>
							<a href="#"> Juan Peacute</a> el <time datetime= "2016-02-09T03:35:20-06:00">
							23 de febrero del 2016 a las 12:50 am </time>
						</header>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
						quis nostrud exercitation ullamco laboris nisi ut.
						</p>
					</article>
					<article>
						<header>
							<a href="#"> Mafer Castillo</a> el <time datetime="2012-02-09T11:40:09-06:00">
							23 de febrero de 2016 a las 3:00 pm</time>
						</header>
						<p>Digamos que hoy me levante oto&ntildeal, pero hable contigo y ya tengo los bolsillos
						llenos de veranos.
						<p>Cuando quieras/puedas, ven a buscarlos.</b>
						</p>
					</article>
				</section>
				<form action="#" method="post">
					<h3>Agregar comentario</h3>
					<p>
						<label for="Nombre">Nombre</label>
						<input name="nombre" id="nombre" type="text" required />
					</p>
					<p>
						<label for="email">Correo</label>
						<input name="email" id="email" type="email" required />
					</p>
					<p>
						<label for="website">Sitio Web</label>
						<input name="website" id="website" type="url" />
					</p>
					<p>
						<label for="comentario">Comentario</label>
						<textarea name="comentario" id="comentario" required></textarea>
					</p>
					<p>
						<input type="submit" value="Agregar Comentario" />
					</p>
				</form>
			</div>	
        <aside>
            <section>
				<header>
					<h3>Categorias</h3>
				</header>
				<ul>
					<li> <a href="#">Lorem ipsum dolor.</a> </li>
					<li> <a href="#">Sit amet consectetur.</a> </li>
					<li> <a href="#">Adipisicing elit sed.</a> </li>
					<li> <a href="#">Do eiusmod tempor.</a> </li>
					<li> <a href="#">Incididunt ut labore.</a> </li>
				</ul>
			</section>
			<section>
				<header>
					<h3>Archivos</h3>
				</header>
				<ul>
					<li> <a href="#">Enero 2012</a> </li>
					<li> <a href="#">Diciembre 2011</a> </li>
					<li> <a href="#">Noviembre 2011</a> </li>
					<li> <a href="#">Octubre 2011</a> </li>
				</ul>
			</section>
        </aside>
		</div>
        <footer>
            <div>
				<section id="Acerca">
					<header>
						<h3>Acerca de...</h3>
					</header>
					<p>
						&iquest;Que gano yo, si obtengo lo que ans&iacute;o?
						Un sue&ntilde;o, un aliento, una chispa de goce fugaz.
						&iquestQuien cambiaria un momento de jubilo por una semana de llanto vacio?
						&iquestO quien venderia la eternidad para tener un juguete y solaz?
						&iquestO por una dulce uva, destruiria la vid y su haz?
					</p>
				</section>
				<section id="otrosBlogs">
					<header>
						<h3>Otros Blogs</h3>
					</header>
					<ul>
						<li> <a href="#">HTML5Tutoriales</a> </li>
						<li> <a href="#">HTML5tuto</a> </li>
						<li> <a href="#">HTML</a> </li>
					</ul>
				</section>
				<section id="popular">
					<header>
						<h3>Lo m&aacute;s popular</h3>
					</header>
					<ul>
						<li> <a href="#">Ten confianza en ti mismo, y en todos los que te rodean</a> </li>
						<li> <a href="#">Fija metas que puedas alcanzar.</a> </li>
						<li> <a href="#">Habla con tus actos y no con tus palabras.</a> </li>
					</ul>
				</section>
			</div>
        </footer>
    </body>
</html>

1 个答案:

答案 0 :(得分：0)

只需进行一些小的CSS更改：

nav {
    // remove position:absolute; 
    // remove left:0;

    display: block;
    width:auto;
    background: url("nav_background.png");
}

nav ul{
   padding:0;
   margin: 0 auto; 
   width:24em; // ( or however many li elements you have at 8em width)
}

nav li {
  width:8em;  // (for example. Could be larger or smaller or px or %)
}
相关问题
最新问题