HTML - Centrar imagen y texto

 
Vista:

Centrar imagen y texto

Publicado por Jorge (1 intervención) el 30/03/2022 18:14:29
Hola estimados, tengo este código que le da el logo a la izquierda y el texto a la derecha; como puede alinear al centro (logo arriba y texto abajo centrado). Cabe mencionar que no soy programador, solo quiero mejorar el hub de datos geográficos.

Gracias de antemano

<div class="mirror-header-theme" style="padding-bottom: 2em;background-color:#1987BB">
<div class="container">
<div class="col-sm-6" style="padding-top: 2em">
<table class="logo-title-alignment" style="background-color: transparent;">
<tbody><tr>
<td><img height="150px" src="https://ipsomary.maps.arcgis.com/sharing/rest/content/items/857d25857baa46908a52c00623105fa3/data"></td>
<td style="vertical-align: top; color: #fff; padding: 10px 20px; font-size: 12px;"><br><br><br>
<br>
</td>
</tr>
</tbody></table>
</div>
<div class="col-sm-6 contact-info-alignment" style="padding-top: 3em;">
<div>
Teléfono:<a href="tel: 04 601 3531">+593 04 601 3531</a> <br>
Whatsapp <a href="https://api.whatsapp.com/send?phone=593981219967&text=Hola%20Ipsomary,%20deseo%20mas%20informaci%C3%B3n%20sobre%20sus%20*Servicios%20Ambientales*%20y%20una%20cotizaci%C3%B3n.%20Gracias">+593 099 121 9967</a><br>
e-mail: <a style="color: #fff" href="mailto:[email protected]">[email protected]</a><br>
<a style="color: #fff" href="https://www.ipsomary.com/">www.ipsomary.com</a><br>
<br>
CDLA. 29 DE JUNIO<br>
MZ. E SOLAR 4, GUAYAQUIL<br>
<br>
</div>
<br>
<div>
</div>
</div>
</div>
</div>

<style>

.contact-info-alignment {
text-align: center; }

.logo-title-alignment {
margin-left : auto;
margin-right: auto; }

@media (min-width: 768px) {
.contact-info-alignment {
text-align: right;
}

.logo-title-alignment {
margin-left : initial;
margin-right: initial
}
}

</style>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Centrar imagen y texto

Publicado por antonio (19 intervenciones) el 30/03/2022 20:37:01
Hay muchas formas de hacerlo como center, darle una clase al div del texto y cambiar el css con padding margins ect y también puedes ponerla en otra fila de la tabla y centrar el texto este es el ejemplo que te paso :


<div class="mirror-header-theme" style="padding-bottom: 2em;background-color:#1987BB">
<div class="container">
<div class="col-sm-6" style="padding-top: 2em">
<table class="logo-title-alignment" style="background-color: transparent;">
<tbody><tr>
<td><img height="150px" src="https://ipsomary.maps.arcgis.com/sharing/rest/content/items/857d25857baa46908a52c00623105fa3/data"></td>
<td style="vertical-align: top; color: #fff; padding: 10px 20px; font-size: 12px;"><br><br><br>
<br>
</td>
</tr>
<tr>
<td class="centro">

<div class="col-sm-6 contact-info-alignment" style="padding-top: 3em;">
<div>
Teléfono:<a href="tel: 04 601 3531">+593 04 601 3531</a> <br>
Whatsapp <a href="https://api.whatsapp.com/send?phone=593981219967&text=Hola%20Ipsomary,%20deseo%20mas%20informaci%C3%B3n%20sobre%20sus%20*Servicios%20Ambientales*%20y%20una%20cotizaci%C3%B3n.%20Gracias">+593 099 121 9967</a><br>
e-mail: <a style="color: #fff" href="mailto:[email protected]">[email protected]</a><br>
<a style="color: #fff" href="https://www.ipsomary.com/">www.ipsomary.com</a><br>
<br>
CDLA. 29 DE JUNIO<br>
MZ. E SOLAR 4, GUAYAQUIL<br>
<br>
</div>
</td>
</tr>
</tbody></table>
</div>

<br>
<div>
</div>
</div>
</div>
</div>

<style>
.centro{
text-align: center;
}
.contact-info-alignment {
text-align: center; }

.logo-title-alignment {
margin-left : auto;
margin-right: auto; }

@media (min-width: 768px) {
.contact-info-alignment {
text-align: center;
}

.logo-title-alignment {
margin-left : initial;
margin-right: initial
}
}

</style>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar