css - texto - li vertical align
¿Cómo alinear verticalmente los elementos<li> en<ul>? (4)
Aquí hay una buena:
Establezca line-height igual a cualquiera que sea la height ; ¡Funciona de maravilla!
P.ej:
li {
height: 30px;
line-height: 30px;
}
Tengo una <ul> horizontal y necesito centrar cada <li> verticalmente. Mi marcado está abajo. Cada <li> tiene un borde, y necesito que los elementos, así como sus contenidos, estén en el centro verticalmente. Por favor ayuda; Soy nuevo en CSS.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.toolbar li
{
border: solid 1px black;
display: block;
float: left;
height: 100px;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.toolbar li.button
{
height: 50px;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li><a href="#">first item<br />
first item<br />
first item</a></li>
<li><a href="#">second item</a></li>
<li><a href="#">last item</a></li>
<li class="button"><a href="#">button<br />
button</a></li>
</ul>
</div>
</body>
</html>
Puedes usar flexbox para esto.
ul {
display: flex;
align-items: center;
}
Una explicación detallada de cómo usar flexbox se puede encontrar here .
Supongo que ya que está utilizando una declaración XML, no se preocupa por IE o navegadores más antiguos.
Para que pueda usar display:table-cell y display:table-row haga lo siguiente:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.toolbar ul {
display:table-row;
}
.toolbar ul li
{
display: table-cell;
height: 100px;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.toolbar ul li a {
display:table-cell;
vertical-align: middle;
height:100px;
border: solid 1px black;
}
.toolbar ul li.button a {
height:50px;
border: solid 1px black;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li><a href="#">first item<br />
first item<br />
first item</a></li>
<li><a href="#">second item</a></li>
<li><a href="#">last item</a></li>
<li class="button"><a href="#">button<br />
button</a></li>
</ul>
</div>
</body>
</html>
Yo tuve el mismo problema. Prueba esto.
<nav>
<ul>
<li><a href="#">AnaSayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
@charset "utf-8";
nav {
background-color: #9900CC;
height: 80px;
width: 400px;
}
ul {
list-style: none;
float: right;
margin: 0;
}
li {
float: left;
width: 100px;
line-height: 80px;
vertical-align: middle;
text-align: center;
margin: 0;
}
nav li a {
width: 100px;
text-decoration: none;
color: #FFFFFF;
}