I have a mini-project with some icons that are accompanied by text. These are well aligned with the text, but not with each other. Is there a way to "tabulate" these icons so that they are aligned by icons?
This is my code and how it is now:
p, h1 {
display: flex;
align-items: center;
}
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="grid-item cuatro">
<h1><i class="material-icons" style="font-size:36px; color: DarkSlateBlue" id="AnimacionIconosG4">info</i> Hola</h1>
<p><i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i> Hola1<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i> Hola2 <i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i> Hola3 </p>
<p><i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>Holacomoestas<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i> Hola5 </p>
<p><i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>Holaquetal<i class="material-icons" style="font-size:24px; color: DarkSlateBlue">play_arrow</i>Hola7</p>
</div>
</body>
</html>
And I want it to be like this:
Also add some space between icon and icon.
I've tried different codes, but to no avail. ( align-items: center
, align-self: center
, justify-items: center
... )
Also, another problem that I have that is also related to the alignment, is in the footer part.
I have a text (which appears on the side and there is no way to move it to the center) and some icons just below that I managed to center, but I can not center the text.
.flex-container {
display: flex;
flex-direction: row;
background-color: none;
justify-content: center;
}
.boton1{
width: 50px;
height: 50px;
}
.boton2{
width: 60px;
height: 50px;
}
a.button {
display: inline-block;
border-radius: 10px;
background-color: DarkSlateBlue;
background-image: linear-gradient(to right, DarkSlateBlue , #8980c4);
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 170px;
height: 30px;
transition: all 0.5s;
cursor: pointer;
margin: 1px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #736aad}
.button:active {
background-color: #5404c8;
box-shadow: 0 3px #666;
transform: translateY(2px);
}
a.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
a.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
a.button:hover span {
padding-right: 25px;
}
a.button:hover span:after {
opacity: 1;
right: 0;
}
<html>
<head></head>
<body>
<div class="grid-item cinco">
<p style="font-weight: bold"> Hola que tal: </p>
<div class="flex-container">
<a href="boton1.com"> <img src="boton1.png" class="boton1" title="Boton1"></a>
<a href="boton2.com"> <img src="boton2.png" class="boton2" title="Boton2"></a>
<a href="prueba.pdf" title="Descarga aquí prueba" class="button"><span>Prueba PDF</span></a>
</div>
</div>
</body>
</html>
I have tried to add the text inside the flex
, but it appeared next to the icons. And even if I put as many <br>
as there were code, it didn't pay attention to me.
I modified your HTML a bit to fit a system of rows and columns . I used
display: flex
but it could also have been solved by treating the content as if it were a table throughdisplay: table
,display: table-row
anddisplay: table-cell
.