Hola gente acá les traigo un pequeño aporte para todos los usuarios que tenemos esta duda... Ya que mucha gente no encuentra como hacer esto y la solución que hacen es hacerlo con tablas o con padding pero nunca funciona bien con textos largo o algún otro inconveniente
El script lo hizo un compañero de donde trabajo y que es parte de la comunidad de foros del web
el_quick así que por favor si usan el script no borren los créditos
Es un ejemplo sencillo con una simple lista pero si se fijan el elemento "a" esta con display: block para que vean que si funciona con elementos de bloque :D
antes que nada necesitan agregar al head el jquery y el script jquery.akomodate-links.js
jquery.akomodate-links.js
Código Javascript
:
Ver original/*
* jquery.akomodate-links.js
*
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*/
(function($){
$.fn.akomodateLinks = function(options){
var defaults = {
"minLineHeight": 14,
"verticalCenter": true
};
var $settings = $.extend({}, defaults, options);
var $broke = false;
this.css("line-height", function(){
$lh = parseInt($(this).css("line-height").replace(/[^0-9]/g, ''));
$ln = $(this).height() / $lh;
$(this).attr("ln", $ln);
$lh = ($lh / $ln);
if($lh < $settings.minLineHeight){
$lh = $settings.minLineHeight ;
$broke = true;
}
return $lh + "px";
});
if($broke){
$lh = Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get())
this.height($lh);
this.css("line-height", function(){
return ($lh / parseInt($(this).attr("ln"))) + "px";
});
}
if($settings.verticalCenter){
this.css({
"padding-top" : function(){
return ((($(this).height() - ($settings.minLineHeight * parseInt($(this).attr("ln")))) / 2) + parseInt($(this).css("padding-top").replace(/[^0-9]/g, ''))) + "px";
},
"padding-bottom" : function(){
return ((($(this).height() - ($settings.minLineHeight * parseInt($(this).attr("ln")))) / 2) + parseInt($(this).css("padding-bottom").replace(/[^0-9]/g, ''))) + "px";
},
"line-height" : $settings.minLineHeight + "px",
"height" : ""
});
}
};
})(jQuery);
luego de esto pasamos a crear un menú de ejemplo sencillo
Código HTML:
Ver original <a href="">Opcion 3 con mas texto
</a> <a href="">Opcion 5 con mucho mas texto
</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tellus lectus, eget aliquam velit. Cras mattis, sem vel semper congue.
aca los estilos
Código CSS:
Ver original#menu { margin: 0px; padding: 0px; }
#menu li { float: left; width: 150px; margin: 0px 10px; background: pink; text-align: center; }
#menu li a { display: block; line-height: 30px; font-size: 14px; padding: 10px; }
#menu li a:hover { text-decoration: underline; }
luego en el head crean la instancia del elemento a crear el vertical-align
Código Javascript
:
Ver original<script type="text/javascript">
$(document).ready(function(){
$('#menu li a').akomodateLinks({
minLineHeight: '16',
verticalCenter: true
});
});
</script>
si se fijan en los estilos esta la clave, en la linea
Código CSS:
Ver original#menu li a { display: block; line-height: 30px; font-size: 14px; padding: 10px; }
el line-height es la clave de todo en este caso como en la instancia le aplicamos el script a #menu li a... a este elemento tenemos que aplicarle un line-height para que el script haga su trabajo :)
aca les dejo el código completo para que lo vean:
index.html
Código HTML:
Ver original<!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" xml:lang="<?= $lang ?>">
<link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="jquery.akomodate-links.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$('#menu li a').akomodateLinks({
minLineHeight: '16',
verticalCenter: true
});
});
<a href="">Opcion 3 con mas texto
</a> <a href="">Opcion 5 con mucho mas texto
</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tellus lectus, eget aliquam velit. Cras mattis, sem vel semper congue.
styles.css
Código CSS:
Ver originala{ text-decoration: none; outline: 0; color: #42210b;; }
ul { list-style: none; }
/* En el código HTML es necesario añadir cellspacing="0" */
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 { padding: 0; margin: 0; }
h2 { padding: 0; margin: 0; }
h3 { padding: 0; margin: 0; }
h5 { padding: 0; margin: 0; }
h6 { padding: 0; margin: 0; }
body{ font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; padding: 0; margin: 0; color: #42210b; }
/**************************************************************/
/* STYLES INDEX */
/**************************************************************/
#menu { margin: 0px; padding: 0px; }
#menu li { float: left; width: 150px; margin: 0px 10px; background: pink; text-align: center; }
#menu li a { display: block; line-height: 30px; font-size: 14px; padding: 10px; }
#menu li a:hover { text-decoration: underline; }
Espero les sirva y cualquier duda o error avisen por favor :D