0
Good afternoon, my friends
I’m not able to perform the alignment of the text and the image in the middle of the blue outline, someone could help me?
Thank you,
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
text-align: center;
}
a:hover, a:visited, a:link, a:active {
color: #000;
text-decoration:none;
}
.content {
display: flex;
justify-content: space-between;
max-width: 916px;
margin: 0 auto;
background: #fff;
padding: 7px 0;
}
span {
width: 214px;
height: 179px;
background: #fbfbfb;
border-radius: 10px;
border: 2px solid #6495ED;
transition: all 0.5s;
cursor: pointer;
}
span:hover{
-webkit-filter: drop-shadow(1px 1px 5px rgba(0,0,0,.5));
filter: drop-shadow(1px 1px 5px rgba(0,0,0,.5));
}
.container {
width:100%;
position: relative;
height: 50px;
}
.svg {
width: 40%;
}
.font {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Suporte</title>
</head>
<body>
<div class="content">
<span class="font"><img src="https://cdn.worldvectorlogo.com/logos/google-classroom.svg" class="svg"/><a href="https://#"><br>Activesoft</a></span>
<span class="font"><img src="https://cdn.worldvectorlogo.com/logos/google-classroom.svg" class="svg"/><a href="https://#"><br>Google Sala de Aula</a></span>
<span class="font"><img src="https://cdn.worldvectorlogo.com/logos/google-drive.svg" class="svg"/><a href="https://#"><br>Google Drive</a></span>
<span class="font"><img src="https://cdn.worldvectorlogo.com/logos/google-forms.svg" style="width: 36%;" /><a href="https://#"><br>Google Forms</a></span>
</div>
<div class="content">
<span class="font"><img src="https://cdn.worldvectorlogo.com/logos/official-gmail-icon-2020-.svg" class="svg"/><a href="https://#"><br>Gmail</a></span>
<span class="font"><img src="https://cdn.worldvectorlogo.com/logos/google-meet-icon-2020-.svg" class="svg"/><a href="https://#"><br>Google Meet</a></span>
<span class="font"></span>
<span class="font"></span>
</div>
</body>
</html>
Confer https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically
– ElvisP