Como alinear iconos en la celdas

publicado por: Anonymous

Hola estoy utilizando la librería fontawesome para mostrar unas unos iconos en unas celdas

  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

Intento ponerlo en la parte superior de la celda, y convalign=”top” ni con vertical-align: top consigo ponerlo.

Cuando estamos visualizando la tabla en una pantalla en posición horizontal, se ve bien porque cada línea de la tabla se muestra en una sola línea.

enter image description here

En cambio, cuando la pantalla se deja en vertical, las líneas se muestran dobles y la celda que contiene el icono se queda en el centro, o igual algo más bajo.

enter image description here

Así muestro el icono

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="es">_x000D_
<head>_x000D_
	<meta charset="UTF-8">_x000D_
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes, width=device-width" />_x000D_
	<title>Titulo</title>_x000D_
_x000D_
	    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>_x000D_
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>_x000D_
	_x000D_
  _x000D_
      <style type="text/css">_x000D_
        .oculto1,.oculto2,.oculto3{_x000D_
            margin-left: 1%;_x000D_
            display: none;_x000D_
        }_x000D_
        .info2_submenu1 span{_x000D_
            padding-left: 15px;_x000D_
        }_x000D_
         td {_x000D_
          vertical-align: "top";_x000D_
        }_x000D_
_x000D_
    </style>_x000D_
_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div>_x000D_
    <p>_x000D_
    <p>_x000D_
    <div>_x000D_
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">_x000D_
           <span><i style="font: 10pt comic sans ms; color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp; Boton 1</span></button></a>_x000D_
    </div>_x000D_
          _x000D_
    <div class="info1">_x000D_
        <a href="#info1"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 1</button></a>_x000D_
    </div>_x000D_
        <div id="<info1></info1>" class="oculto1">_x000D_
        <table>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;INDICE por artículos</a></td>_x000D_
        	</tr>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Cap. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr> _x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td><a href="pagina.htm">&nbsp;Cap. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr>_x000D_
        </table>_x000D_
        </div>_x000D_
         _x000D_
_x000D_
    <div class="info2">_x000D_
        <a href="#info2"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 2</button></a>_x000D_
    </div>_x000D_
        <div id="info2" class="oculto2">_x000D_
        <table>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;INDICE</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>_x000D_
            </tr>_x000D_
_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-file" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="#" class="info2_ET1">&nbsp;Tema 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></td>_x000D_
            </tr>_x000D_
			<tr hidden class="info2_submenu1">_x000D_
			<td></td>_x000D_
			    <td>_x000D_
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp;Cap. 1/Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></span><br>_x000D_
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp;Cap. 1/Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></span>_x000D_
			    </td>_x000D_
			</tr>_x000D_
        </table>_x000D_
        </div>_x000D_
          _x000D_
_x000D_
    <div class="info3">_x000D_
        <a href="#info3"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 3</button></a>_x000D_
    </div>_x000D_
        <div id="info3" class="oculto3">_x000D_
        <table>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;INDICE</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">&nbsp;Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>_x000D_
            </tr>_x000D_
            </tr>_x000D_
        </table>_x000D_
        </div>_x000D_
_x000D_
    <div>_x000D_
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">_x000D_
           <span><i style="font: 10pt comic sans ms; color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>&nbsp; INDICE</span></button></a>_x000D_
    </div>_x000D_
    _x000D_
</div>_x000D_
_x000D_
<script type="text/javascript">_x000D_
    jQuery(document).ready(function(){_x000D_
            $('.info1').on('click',function(){_x000D_
                $('.oculto1').slideToggle('fast');_x000D_
                $('.oculto2').slideUp('fast');_x000D_
                $('.oculto3').slideUp('fast');_x000D_
                $('.info2_submenu1').slideUp('fast');_x000D_
_x000D_
            });_x000D_
            $('.info2').on('click',function(){_x000D_
                $('.oculto2').slideToggle('fast');_x000D_
                $('.oculto1').slideUp('fast');_x000D_
                $('.oculto3').slideUp('fast');_x000D_
                $('.info2_submenu1').slideUp('fast');_x000D_
_x000D_
            });_x000D_
            $('.info3').on('click',function(){_x000D_
                $('.oculto3').slideToggle('fast');_x000D_
                $('.oculto2').slideUp('fast');_x000D_
                $('.oculto1').slideUp('fast');_x000D_
                $('.info2_submenu1').slideUp('fast');_x000D_
            });_x000D_
            $('.info2_ET1').on('click',function(){_x000D_
                $('.info2_submenu1').slideToggle('fast');_x000D_
            });_x000D_
        }); _x000D_
</script>_x000D_
_x000D_
_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Incluso he probado a alinear todo el contenido de la <tabla> y no lo he conseguido.

Como se puede poner el icono en la parte alta de la celda para que cuando se muestre el contenido en más de una línea, se vea bien.

enter image description here

solución

Debería funcionar con un simple vertical-align: top;

_x000D_

_x000D_

td {_x000D_
  vertical-align: top;_x000D_
}

_x000D_

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>_x000D_
_x000D_
<table>_x000D_
    <tr>_x000D_
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>_x000D_
        <td>Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. Chocolate bar macaroon candy sugar plum chocolate bar caramels sweet dessert. Danish tiramisu bonbon dessert sugar plum tart fruitcake gummies. Jelly beans chupa chups gingerbread croissant. Candy canes tiramisu candy dragée icing biscuit cotton candy. Cupcake cookie bonbon cookie. Chocolate caramels oat cake sweet roll gummies powder brownie ice cream brownie. Jujubes toffee candy canes sweet roll danish jelly gummies lemon drops. Pie candy canes brownie. Gingerbread macaroon cookie gummies cheesecake. Candy canes wafer sesame snaps. Candy sweet marshmallow topping brownie topping dragée gummi bears chocolate bar. Icing chupa chups chupa chups apple pie wafer cookie jelly gummi bears sweet.</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i></td>_x000D_
        <td>Lorem ipsum...</td>_x000D_
    </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Si quisieras incluso utilizar una sola celda para ambos, lo puedes solucionar fácilmente con flexbox:

_x000D_

_x000D_

td {_x000D_
  display: flex;_x000D_
}

_x000D_

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>_x000D_
_x000D_
<table>_x000D_
    <tr>_x000D_
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i><span>Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. Chocolate bar macaroon candy sugar plum chocolate bar caramels sweet dessert. Danish tiramisu bonbon dessert sugar plum tart fruitcake gummies. Jelly beans chupa chups gingerbread croissant. Candy canes tiramisu candy dragée icing biscuit cotton candy. Cupcake cookie bonbon cookie. Chocolate caramels oat cake sweet roll gummies powder brownie ice cream brownie.</span></td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <td><i class="fa fa-angle-double-right" aria-hidden="true"></i><span>Lorem ipsum...</span></td>_x000D_
    </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

El resto serían los detalles de los espacios que necesites entre el ícono y el texto.

EDICIÓN:

No debes incluir comillas cuando defines los valores preestablecidos para las propiedades de CSS, lo correcto en este caso es: vertical-align: top;

Tampoco debes incluir espacios consecutivos en HTML como &nbsp;&nbsp;&nbsp;, eso es una muy mala práctica, para eso existe CSS.

Por último, cuando apliques el mismo estilo a varios elementos, (el color azul por ejemplo), lo correcto es agregarle una clase a cada uno de estos elementos y definir el estilo solo una vez en el CSS (ver .blue-text).

Idealmente el código CSS no debe estar “inline”, sino que debe estar aislado del HTML, en su totalidad.

_x000D_

_x000D_

    jQuery(document).ready(function(){_x000D_
            $('.info1').on('click',function(){_x000D_
                $('.oculto1').slideToggle('fast');_x000D_
                $('.oculto2').slideUp('fast');_x000D_
                $('.oculto3').slideUp('fast');_x000D_
                $('.info2_submenu1').slideUp('fast');_x000D_
_x000D_
            });_x000D_
            $('.info2').on('click',function(){_x000D_
                $('.oculto2').slideToggle('fast');_x000D_
                $('.oculto1').slideUp('fast');_x000D_
                $('.oculto3').slideUp('fast');_x000D_
                $('.info2_submenu1').slideUp('fast');_x000D_
_x000D_
            });_x000D_
            $('.info3').on('click',function(){_x000D_
                $('.oculto3').slideToggle('fast');_x000D_
                $('.oculto2').slideUp('fast');_x000D_
                $('.oculto1').slideUp('fast');_x000D_
                $('.info2_submenu1').slideUp('fast');_x000D_
            });_x000D_
            $('.info2_ET1').on('click',function(){_x000D_
                $('.info2_submenu1').slideToggle('fast');_x000D_
            });_x000D_
        }); 

_x000D_

        .oculto1,.oculto2,.oculto3{_x000D_
            margin-left: 1%;_x000D_
            display: none;_x000D_
        }_x000D_
        .info2_submenu1 span{_x000D_
            padding-left: 15px;_x000D_
        }_x000D_
        .blue-text {_x000D_
          font: 10pt comic sans ms; _x000D_
          color: blue;_x000D_
        }_x000D_
        td {_x000D_
          vertical-align: top;_x000D_
        }

_x000D_

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>_x000D_
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>_x000D_
<div>_x000D_
    <p>_x000D_
    <p>_x000D_
    <div>_x000D_
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">_x000D_
           <span><i class="fa fa-angle-double-right blue-text" aria-hidden="true"></i> Boton 1</span></button></a>_x000D_
    </div>_x000D_
          _x000D_
    <div class="info1">_x000D_
        <a href="#info1"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 1</button></a>_x000D_
    </div>_x000D_
        <div id="<info1></info1>" class="oculto1">_x000D_
        <table>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE por artículos</a></td>_x000D_
        	</tr>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">Cap. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr> _x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td><a href="pagina.htm">Cap. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr>_x000D_
        </table>_x000D_
        </div>_x000D_
         _x000D_
_x000D_
    <div class="info2">_x000D_
        <a href="#info2"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 2</button></a>_x000D_
    </div>_x000D_
        <div id="info2" class="oculto2">_x000D_
        <table>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>_x000D_
            </tr>_x000D_
_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-file" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="#" class="info2_ET1">Tema 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></td>_x000D_
            </tr>_x000D_
			<tr hidden class="info2_submenu1">_x000D_
			<td></td>_x000D_
			    <td>_x000D_
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>Cap. 1/Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></span><br>_x000D_
			    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>Cap. 1/Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></span>_x000D_
			    </td>_x000D_
			</tr>_x000D_
        </table>_x000D_
        </div>_x000D_
          _x000D_
_x000D_
    <div class="info3">_x000D_
        <a href="#info3"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 3</button></a>_x000D_
    </div>_x000D_
        <div id="info3" class="oculto3">_x000D_
        <table>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>_x000D_
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>_x000D_
            </tr>_x000D_
        </table>_x000D_
        </div>_x000D_
_x000D_
    <div>_x000D_
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">_x000D_
           <span><i class="fa fa-angle-double-right blue-text" aria-hidden="true"></i> INDICE</span></button></a>_x000D_
    </div>_x000D_
    _x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *