Cómo centralizar un código

medg · 2017-08-05T22:27:08-0500

La idea es que quede asi...

Pero no se como lograrlo. Hasta ahora solo me queda.....

Este es el codigo que he creado hasta ahora...
<div style="font-size:16px; background-color: yellow; height: 100px; font-family: verdana; width: 100%;"><span style="margin-left:10px; padding-top: 40px;">Más chistes aquí &nbsp<div class="fb-like" data-href="https://www.facebook.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div></span></div>

Gracias de antemano.
Muchas gracias a todos.

pd: Si este no es el tema donde va, no se donde mas colocarlo. Avisenme y con gusto solicito qu elo muevan alla.
Saludos.

Son Lux · 2017-08-05T23:03:36-0500

A ver si te sirve...

Estilos

HTML:

<style type="text/css" media="screen">
	.contenedor {
		font-size:16px; 
		background-color: yellow; 
		height: 100px; 
		font-family: verdana; 
		width: 100%;
	}
	.contenido-span {
		padding-top: 40px;
		float: left;
	}
	#facebook {
		float: right;
	}
</style>

Y el div en html

HTML:

<div class="contenedor"><span class="contenido-span">Más chistes aquí &nbsp<div id="facebook" class="fb-like" data-href="https://www.facebook.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div></span></div>

edwinhc · 2017-08-05T23:22:18-0500

Otra forma.

<div style="width:100%; display: flex;flex-wrap: wrap;justify-content: space-between;">
<div style="font-size:16px; background-color: yellow; height: 100px; font-family: verdana;">
<span style="margin-left:10px; padding-top: 40px;">
Más chistes aquí
</span>
</div>

<div>
<div class="fb-like" data-href="https://www.facebook.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"> </div>
</div>
</div>

medg · 2017-08-08T22:38:59-0500

No resulto. Aun queda desubicado.
Pero gracias por tu esfuerzo.

- - - Actualizado - - -

edwinhc dijo:
Otra forma.

<div style="width:100%; display: flex;flex-wrap: wrap;justify-content: space-between;">
<div style="font-size:16px; background-color: yellow; height: 100px; font-family: verdana;">
<span style="margin-left:10px; padding-top: 40px;">
Más chistes aquí
</span>
</div>

<div>
<div class="fb-like" data-href="https://www.facebook.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"> </div>
</div>
</div>

Funciono mejor, pero no llega todabia.
Igual gracias por el esfuerzo. 🙁

WebDesarrollar · 2017-08-18T08:48:03-0500

Solo te queda es seguir probando cambiando en el <span style="margin-left:10px; padding-top: 40px;"> hasta dar la ubicación que deseas.

rau2191 · 2017-08-27T17:24:03-0500

te falto el align-items:center para centrarlo en vertical y que quede en la mitad de la altura del div. Con esto te evitas los paddings-top y demas

Wizard · 2017-08-28T11:09:38-0500

Aquí te coloco el código corregido, creo que es lo que necesitas:

Estilos:

Insertar CODE, HTML o PHP:

<style>
        .cajaExterior {
            font-size: 16px; 
            background-color: yellow; 
            height: 100px; 
            font-family: verdana; 
            width: 100%;
            padding: 1em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .fb-like {
            width: 100px;
            height: 25px;
            border: 2px solid blue;
            border-radius: 5px;      
        }
    </style>

HTML:

Insertar CODE, HTML o PHP:

    <div class="cajaExterior">
    <span class="elementoSpan">Más chistes aquí &nbsp;</span>
    <div class="fb-like" data-href="https://www.facebook.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false">         
    </div>

Ten en cuenta, que los estilos en la clase "fb-like" sólo los utilicé con fines didácticos para simular la situación que necesitas, así que puedes borrar esos estilos, espero que te sirva el código [MENTION=141079]medg[/MENTION]

Cómo centralizar un código

medg

Son Lux

edwinhc

medg

WebDesarrollar

rau2191

Wizard

Temas similares