En este artículo, aprenderemos a crear un div HTML que tenga texto alineado a la izquierda y un ícono alineado a la derecha. A veces, necesitamos alinear el texto al lado izquierdo y, si se usa una imagen o un ícono, alinéelo al lado derecho. Para esto, podemos usar la propiedad de visualización configurando el valor como una propiedad flexible que se usa para mostrar un elemento como un contenedor flexible a nivel de bloque. junto con el uso de la propiedad flotante que se puede usar para hacer flotar el elemento a la posición especificada.
Propiedades utilizadas:
- display: para mostrar texto e íconos uno al lado del otro, usaremos la propiedad display: flex .
- float: para establecer el ícono en el lado derecho del div, usamos float: right propiedad.
Enfoque: Usaremos HTML para crear un div . Después de eso, agregamos texto e íconos al div y diseñamos los elementos div de acuerdo con nuestros requisitos usando CSS.
El siguiente ejemplo demuestra el enfoque anterior.
Ejemplo 1: En este ejemplo, hemos configurado el ícono en el lado derecho del texto usando la propiedad display: flex . En el siguiente resultado, debido a la visualización: flex y flex-direction: el texto y el icono de propiedades de fila aparecen uno al lado del otro en cada elemento div .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
div {
display: flex;
flex-direction: row;
height: 50px;
width: 400px;
font-size: 30px;
}
</style>
</head>
<body>
<!--display for the all div is block-->
<div style="background-color:green;
color:white">
<span class="text">GeeksforGeeks</span>
<span class="icon">
<i class="material-icons">computer</i>
</span>
</div>
<div style="background-color:white;
color:green">
<span class="text">GeeksforGeeks</span>
<span class="icon">
<i class="material-icons">computer</i>
</span>
</div>
<div style="background-color:green;
color:white">
<span class="text">GeeksforGeeks</span>
<span class="icon">
<i class="material-icons">computer</i>
</span>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, hemos configurado el ícono en el lado derecho del div . En la salida, puede ver los 3 div uno debajo del otro, un ícono en el lado derecho del div y texto en el lado izquierdo del elemento div .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport" content=
"width=device-width,
initial-scale=1">
<link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.parentDiv {
display: block;
height: 110px;
width: 400px;
font-size: 30px;
}
/* To set icon at the right side of the div*/
.icon {
margin-left: 10px;
float: right;
}
</style>
</head>
<body>
<!--parent div-->
<div class="parentDiv">
<!--display for the all div is block-->
<div style="background-color:green;
color:white">
<span class="text">GeeksforGeeks</span>
<span class="icon">
<i class="material-icons">computer</i>
</span>
</div>
<div style="background-color:white;
color:green">
<span class="text">GeeksforGeeks</span>
<span class="icon">
<i class="material-icons">computer</i>
</span>
</div>
<div style="background-color:green;
color:white">
<span class="text">GeeksforGeeks</span>
<span class="icon">
<i class="material-icons">computer</i>
</span>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA