我的代码位于http://jsfiddle.net/truxx/v8jnyn9h/
* {
margin: 0px;
padding: 0px;
font-family: helvetica;
}
body,
html {
min-height: 100%;
}
body {
background-image: url("code2.jpg");
background-attachment: fixed;
}
div#negro {
margin: auto;
height: 40px;
background-color: white;
}
div#nav {
margin: auto;
width: 1000px;
height: 40px;
background-color: red;
}
ul {
list-style: none;
width: 1000px;
height: 40px;
}
li {
float: left;
width: 100%;
width: 200px;
height: 40px;
background-color: green;
overflow: hidden;
margin-top: 0px
}
div.contenedor_general:hover {
margin-top: -40px;
}
div.contenedor_general {
width: 200px;
height: 80px;
background-color: yellow;
-webkit-transition: margin-top .2s;
}
div.contenedor_uno {
width: 200px;
height: 36px;
background-color: #101010;
overflow: hidden;
border-bottom: 4px solid #707070;
}
div.contenedor_dos {
width: 200px;
height: 36px;
background-color: #707070;
overflow: hidden;
border-bottom: 4px solid #101010;
}
p.texto_uno,
p.texto_dos {
text-align: center;
margin-top: 10px;
color: white;
}
a.links1,
a.links2 {
text-align: center;
margin-top: 10px;
color: white;
text-decoration: none;
}
div#general {
margin: auto;
margin-top: 0px;
width: 1000px;
height: 800px;
/*background-color:red; */
}
div#ucleed {
float: right;
margin-top: 50px;
margin-right: 5px;
width: 300px;
height: 240px;
/* background-color:black; */
}
.text_line {
clear: both;
}
div#ofertas {
float: right;
margin-right: 5px;
margin-top: 0px;
width: 300px;
height: 480px;
border: 5px solid #202020;
background-image: url(ucleed2.png);
}
div#twitter {
width: 300px;
height: 480px;
border: 5px solid black;
background-image: url(ucleedtwitter.png);
visibility: hidden;
}
div#ofertas:hover div#twitter {
visibility: visible;
}
div#novedades {
margin: auto;
/* width:640px; */
height: 200px;
background-color: blue;
}
div#body {
margin-top: 20px;
width: 640px;
height: 580px;
background-color: purple;
}
.ucleed {
margin-top: 20px;
}<div id="novedades"></div>
<div id="nav">
<div id="negro"></div>
<ul>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<a href="inicio.html" class="links1">Inicio</a>
</div>
<div class="contenedor_dos">
<a href="inicio.html" class="links2">Inicio</a>
</div>
</div>
</li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<a href="ucleed.html" class="links1">Live</a>
</div>
<div class="contenedor_dos">
<a href="ucleed.html" class="links2">Live</a>
</div>
</div>
</li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<p href="/bio.html" class="texto_uno">Biografía</p>
</div>
<div class="contenedor_dos">
<p href="/bio.html" class="texto_dos">Biografía</p>
</div>
</div>
</li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<p href="/proyectos.html" class="texto_uno">Proyectos</p>
</div>
<div class="contenedor_dos">
<p href="/proyectos.html" class="texto_dos">Proyectos</p>
</div>
</div>
</li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<p href="/contacto.html" class="texto_uno">Contacto</p>
</div>
<div class="contenedor_dos">
<p href="/contacto.html" class="texto_dos">Contacto</p>
</div>
</div>
</li>
</ul>
<div id="general">
<div id="ucleed" class="text_line">
</div>
<div id="ofertas" class="text_line">
<div id="twitter">
<!-- <img src="ucleedtwitter.png" class="ucleed"> -->
</div>
</div>
<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate est quis erat maximus, ac blandit lorem pulvinar. Nunc eros mauris, vulputate pharetra ex vel, imperdiet fermentum nunc. Sed facilisis tincidunt posuere. Aenean cursus, nunc
vel sollicitudin facilisis, erat mauris consequat nulla, non tristique augue eros cursus velit. Proin cursus tortor lectus, at pretium urna mattis at. Quisque cursus mi sit amet dolor mollis porta. Suspendisse gravida eleifend lectus, quis tincidunt
leo volutpat vel. Aenean sed nulla id nibh interdum efficitur. In vehicula placerat orci sit amet condimentum. Quisque cursus risus a elit aliquet posuere. Nulla facilisi. Donec bibendum bibendum nulla, non vulputate ipsum dapibus at. Nam iaculis
finibus elit, eget mattis ligula sodales vel. Etiam vitae venenatis arcu. Vivamus vel semper quam. Vivamus semper id elit ac efficitur. Cras vehicula lectus nibh, pellentesque auctor felis tincidunt non. In nec massa ac augue fermentum condimentum.
Vivamus bibendum, felis a tristique aliquam, tortor massa consequat arcu, ac convallis est justo quis lacus. Curabitur euismod egestas volutpat. Cras mi est, suscipit sit amet tellus eget, sollicitudin luctus lectus. Ut nec suscipit lorem. Maecenas
posuere dolor ut neque interdum posuere. Phasellus nec volutpat urna. Praesent pellentesque sed nisi eget sagittis. Donec tortor erat, suscipit eget nisl iaculis, gravida maximus libero. Donec ut massa ultricies, sodales mauris at, vehicula eros.
Praesent eu ullamcorper mi.
</p>
</div>
</div>
</div>
我尝试在nav栏的前两个框中插入链接，text-align: center停止工作。
html代码（只是链接部分）是：
<div class="contenedor_uno">
<a href="inicio.html" class="links1">Inicio</a>
</div>
<div class="contenedor_dos">
<a href="inicio.html" class="links2">Inicio</a>
</div>
CSS部分是
a.links1,
a.links2 {
text-align: center;
margin-top: 10px;
color: white;
text-decoration: none;
}
我对如何解决这个问题一无所知。如果我更改a标记的p标记，则文本会对齐，但链接当然会停止工作。
答案 0 :(得分：2)
您需要在div中使用text-align：
.contenedor_uno,.contenedor_dos{
text-align: center;
}
答案 1 :(得分：1)
标记是内联标记，因此text-align不会对其进行处理，而p tag是块标记，这就是text-align有效的原因。因此，您应该尝试将text-align属性赋予父div，或者您可以通过css创建标记块并使用text-align : center;。
CSS：
.contenedor_uno,.contenedor_dos{
text-align: center;
}
或
a.links1,a.links2 {
display: block;
text-align: center;
margin-top: 10px;
color: white;
text-decoration: none;
}
检查此Jsfiddle
答案 2 :(得分：0)
简单的解决方案 - 将其添加到您的代码中（链接的CSS）：
width: 100%;
display: block;
就像：
a.links1,
a.links2
{
width: 100%;
display: block;
text-align: center;
margin-top: 10px;
color: white;
text-decoration: none;
}
工作示例：
http://jsfiddle.net/v8jnyn9h/2/
*{
margin:0px;
padding:0px;
font-family: helvetica;
}
body,
html {
min-height: 100%;
}
body{
background-image:url("code2.jpg");
background-attachment: fixed;
}
div#negro {
margin: auto;
height: 40px;
background-color: white;
}
div#nav {
margin: auto;
width:1000px;
height:40px;
background-color:red;
}
ul{
list-style: none;
width: 1000px;
height: 40px;
}
li{
float:left;
width: 100%;
width: 200px;
height: 40px;
background-color:green;
overflow:hidden;
margin-top:0px
}
div.contenedor_general:hover{
margin-top:-40px;
}
div.contenedor_general{
width:200px;
height:80px;
background-color:yellow;
-webkit-transition:margin-top .2s;
}
div.contenedor_uno{
width:200px;
height:36px;
background-color:#101010;
overflow:hidden;
border-bottom: 4px solid #707070;
}
div.contenedor_dos{
width:200px;
height:36px;
background-color: #707070;
overflow:hidden;
border-bottom: 4px solid #101010;
}
p.texto_uno, p.texto_dos{
text-align:center;
margin-top:10px;
color:white;
}
a.links1, a.links2{
width: 100%;
display: block;
text-align:center;
margin-top:10px;
color:white;
text-decoration: none;
}
div#general {
margin: auto;
margin-top: 0px;
width:1000px;
height: 800px;
/*background-color:red; */
}
div#ucleed {
float:right;
margin-top: 50px;
margin-right: 5px;
width: 300px;
height:240px;
/* background-color:black; */
}
.text_line {
clear: both;
}
div#ofertas {
float: right;
margin-right: 5px;
margin-top: 0px;
width:300px;
height:480px;
border: 5px solid #202020;
background-image:url(ucleed2.png);
}
div#twitter{
width: 300px;
height: 480px;
border: 5px solid black;
background-image:url(ucleedtwitter.png);
visibility: hidden;
}
div#ofertas:hover div#twitter{
visibility:visible;
}
div#novedades {
margin: auto;
/* width:640px; */
height:200px;
background-color:blue;
}
div#body {
margin-top:20px;
width:640px;
height:580px;
background-color:purple;
}
.ucleed{
margin-top: 20px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>efecto Hover en menu</title>
<link rel="stylesheet" href="nav_style.css" />
</head>
<body>
<div id="novedades">
</div>
<!-- Aquí empieza la descripción del navegador. -->
<div id="nav">
<div id="negro"> </div>
<ul>
<li> <div class="contenedor_general">
<div class="contenedor_uno">
<a href="inicio.html" class="links1">Inicio</a>
</div>
<div class="contenedor_dos">
<a href="inicio.html" class="links2">Inicio</a>
</div>
</div></li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<a href="ucleed.html" class="links1">Live</a>
</div>
<div class="contenedor_dos">
<a href="ucleed.html" class="links2">Live</a>
</div>
</div>
</li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<p href="/bio.html" class="texto_uno">Biografía</p>
</div>
<div class="contenedor_dos">
<p href="/bio.html" class="texto_dos">Biografía</p>
</div>
</div>
</li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<p href="/proyectos.html" class="texto_uno">Proyectos</p>
</div>
<div class="contenedor_dos">
<p href="/proyectos.html" class="texto_dos">Proyectos</p>
</div>
</div>
</li>
<li>
<div class="contenedor_general">
<div class="contenedor_uno">
<p href="/contacto.html" class="texto_uno">Contacto</p>
</div>
<div class="contenedor_dos">
<p href="/contacto.html" class="texto_dos">Contacto</p>
</div>
</div>
</li>
</ul>
<!-- Aquí finaliza la descripción del navegador. -->
<!-- Aquí la descripción de las tablas. -->
<div id="general">
<div id="ucleed" class="text_line">
</div>
<div id="ofertas" class="text_line">
<div id="twitter">
<!-- <img src="ucleedtwitter.png" class="ucleed"> -->
</div>
</div>
<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate est quis erat maximus, ac blandit lorem pulvinar. Nunc eros mauris, vulputate pharetra ex vel, imperdiet fermentum nunc. Sed facilisis tincidunt posuere. Aenean cursus, nunc vel sollicitudin facilisis, erat mauris consequat nulla, non tristique augue eros cursus velit. Proin cursus tortor lectus, at pretium urna mattis at. Quisque cursus mi sit amet dolor mollis porta. Suspendisse gravida eleifend lectus, quis tincidunt leo volutpat vel. Aenean sed nulla id nibh interdum efficitur. In vehicula placerat orci sit amet condimentum. Quisque cursus risus a elit aliquet posuere. Nulla facilisi. Donec bibendum bibendum nulla, non vulputate ipsum dapibus at. Nam iaculis finibus elit, eget mattis ligula sodales vel.
Etiam vitae venenatis arcu. Vivamus vel semper quam. Vivamus semper id elit ac efficitur. Cras vehicula lectus nibh, pellentesque auctor felis tincidunt non. In nec massa ac augue fermentum condimentum. Vivamus bibendum, felis a tristique aliquam, tortor massa consequat arcu, ac convallis est justo quis lacus. Curabitur euismod egestas volutpat. Cras mi est, suscipit sit amet tellus eget, sollicitudin luctus lectus. Ut nec suscipit lorem. Maecenas posuere dolor ut neque interdum posuere. Phasellus nec volutpat urna. Praesent pellentesque sed nisi eget sagittis. Donec tortor erat, suscipit eget nisl iaculis, gravida maximus libero. Donec ut massa ultricies, sodales mauris at, vehicula eros. Praesent eu ullamcorper mi.
</p>
</div>
</div>
</div>
</body>
</html>