Foros del Web » Creando para Internet » Diseño web »

Como poner contenido a la derecha de un titulo centrado

Estas en el tema de Como poner contenido a la derecha de un titulo centrado en el foro de Diseño web en Foros del Web. Buenas, me pasaron este código: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original .titulo-seccion {   /*padding: .5rem 1rem;*/   padding-right : 1rem ;   padding-left : ...
  #1 (permalink)  
Antiguo 25/05/2019, 08:28
 
Fecha de Ingreso: abril-2011
Mensajes: 168
Antigüedad: 8 años, 4 meses
Puntos: 1
Como poner contenido a la derecha de un titulo centrado

Buenas, me pasaron este código:

Código CSS:
Ver original
  1. .titulo-seccion {
  2.   /*padding: .5rem 1rem;*/
  3.   padding-right: 1rem;
  4.   padding-left: 1rem;
  5.   /*margin-bottom: .5rem;*/
  6.   background-color: #0000001a;
  7. }

Código PHP:
Ver original
  1. <div class="titulo-seccion">
  2.     <h1 align="center">
  3.         Cobranza <?php echo $nroCobranza?>
  4.     </h1>
  5. </div>

que me da como resultado: (Dejo el enlace a la imagen ya que al previsualizar el mensaje no la cargaba: https://ibb.co/MR3417z)

y me pidieron que lo deje asi: (Dejo el enlace a la imagen ya que al previsualizar el mensaje no la cargaba: https://ibb.co/GC4Vjfz)

Solamente habría que agregar el numero de factura y de recibo a la derecha del numero de cobranza que esta centrado.

No manejo prácticamente estos temas, así que solicito su ayuda para poder hacerlo.

Desde ya muchas gracias
  #2 (permalink)  
Antiguo 25/05/2019, 17:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.442
Antigüedad: 11 años, 5 meses
Puntos: 1066
Respuesta: Como poner contenido a la derecha de un titulo centrado

Antes de pedir ayuda debes intentar algo tu mismo, de lo contrario es mejor pasar a contratar a alguien que sepa del tema.
  #3 (permalink)  
Antiguo 25/05/2019, 18:51
 
Fecha de Ingreso: abril-2011
Mensajes: 168
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: Como poner contenido a la derecha de un titulo centrado

Hola ArturoGallegos, que no lo haya mencionado no quiere decir que no lo haya hecho...
  #4 (permalink)  
Antiguo 28/05/2019, 01:35
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.023
Antigüedad: 16 años, 5 meses
Puntos: 1820
Respuesta: Como poner contenido a la derecha de un titulo centrado

Código HTML:
Ver original
  1. <h1 align="center">

No uses eso. Tiene como 20 años que no lo debes hacer.

Te dejo la lógica que debes seguir.

Para tener algo a la derecha, algo en el centro y espacio vacío a la izquierda... Puedes poner un objeto vacío a la izquierda.

Código HTML:
Ver original
  1. <div class="Entre3">
  2.    <div></div>
  3.    <div></div>
  4.    <div></div>
  5. </div>

Cada elemento dentro lo pones que mida 33%

Código CSS:
Ver original
  1. .Entre3 div{width: 33%;}

El detalle es de que hay que estudiar CSS, ya que cuando pones una cosa se va a mover otra. Aprender a fondo es una muy buena inversión de tiempo.

La otra opción es de que busques a un diseñador que te ayude.
  #5 (permalink)  
Antiguo 28/05/2019, 07:23
 
Fecha de Ingreso: abril-2011
Mensajes: 168
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: Como poner contenido a la derecha de un titulo centrado

Hola Rafael, muchas gracias por tu respuesta, toco todos estos temas de oído nomas y esto me lo dieron porque la persona que lo realiza no esta disponible en estos momentos y yo era el mas afín. Agradezco mucho tu respuesta, no solo por dar una solución al problema puntual sino también por enseñar como debería ser la lógica.

Mas tarde lo pruebo y aviso como fue.

Saludos
  #6 (permalink)  
Antiguo 28/05/2019, 11:18
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.023
Antigüedad: 16 años, 5 meses
Puntos: 1820
Respuesta: Como poner contenido a la derecha de un titulo centrado

Oh, me faltó una cosa.

Código HTML:
Ver original
  1. .Entre3 div{width: 33%; display: inline-block;}
  #7 (permalink)  
Antiguo 28/05/2019, 12:28
 
Fecha de Ingreso: abril-2011
Mensajes: 168
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: Como poner contenido a la derecha de un titulo centrado

Si, esa es una de las pocas cosas que mas o menos entiendo!! jeje

Ahora me quedó asi el codigo:
Código PHP:
Ver original
  1. <div class="titulo-seccion">
  2.     <div></div>
  3.     <div style="text-align:center"><h1>Cobranza <?php echo $nroCobranza?></h1></div>
  4.     <div id="comprobantes">
  5.         <div id="factura"><?php echo $factura?></div>
  6.     <div id="recibo"><?php echo $recibo?></div>
  7.     </div>
  8. </div>

pero factura y recibo quedan un poco mas abajo y la idea es que quede centrado verticalmente...

gracias a la vista de desarrollador del chrome pude llegar a tener este codigo css:
Código CSS:
Ver original
  1. .titulo-seccion {
  2.   /*padding: .5rem 1rem;*/
  3.   padding-right: 1rem;
  4.   padding-left: 1rem;
  5.   margin-bottom: .5rem;
  6.   background-color: #0000001a;
  7. }
  8. .titulo-seccion div{
  9.     width: 33%;
  10.     display:inline-block;
  11. }
  12. #comprobantes #recibo,#factura{
  13.     font-size:12px;
  14.     font-weight:bold;
  15.     width: 45%; /*----------si pongo 50% queda uno debajo del otro vaya uno a saber porque-----------*/
  16.     display:inline-block;
  17.     text-align:center;
  18. }
  #8 (permalink)  
Antiguo 28/05/2019, 22:02
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.023
Antigüedad: 16 años, 5 meses
Puntos: 1820
Respuesta: Como poner contenido a la derecha de un titulo centrado

Estudia esto: https://www.google.com/search?client...hings+centered
  #9 (permalink)  
Antiguo 29/05/2019, 05:35
 
Fecha de Ingreso: abril-2011
Mensajes: 168
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: Como poner contenido a la derecha de un titulo centrado

Nuevamente muchas gracias!

Lo había solucionado temporalmente agregando al div componentes esta linea:

Código CSS:
Ver original
  1. vertical-align:text-bottom;

Pero ahora pude lograr centrar todo el contenido de titulo-seccion utilizando:

Código CSS:
Ver original
  1. display: flex;
  2. align-items: center;
  3. justify-content: center;

y algun que otro
Código CSS:
Ver original
  1. text-align: center

Solamente para satisfacer mi curiosidad, en tu primer respuesta Rafael decias que no se debía usar mas:
Código HTML:
Ver original
  1. <h1 align="center">

Consulta, esto se debe al orden en el que se cargan las páginas y la velocidad de carga de las mismas? Algo leí hace un tiempo, pero no se si debe a eso o a que.

Gracias
  #10 (permalink)  
Antiguo 29/05/2019, 13:37
Avatar de tomerqueves  
Fecha de Ingreso: marzo-2005
Ubicación: algeciras (cadiz)
Mensajes: 200
Antigüedad: 14 años, 4 meses
Puntos: 7
Respuesta: Como poner contenido a la derecha de un titulo centrado

en el table
dentro del tr metes tres td, luego ya anidando, uno tras otro etc etc eso ya será otra cuestió para depurar lo que buscas.
__________________
A todos los moderadores y admiinistradores. Si algun día me banean, por favor devolverme la carita de mi avatar
  #11 (permalink)  
Antiguo 30/05/2019, 05:29
 
Fecha de Ingreso: abril-2011
Mensajes: 168
Antigüedad: 8 años, 4 meses
Puntos: 1
Respuesta: Como poner contenido a la derecha de un titulo centrado

Hola tomerqueves, gracias por tu respuesta. El problema lo pude solucionar así como lo mencioné arriba, pero claro que tu respuesta también es valida.

Ahora tenemos 2 opciones para hacer lo mismo (Seguro hay mas), cual sería la mejor? O, en todo caso, cuales serían las ventajas y desventajas de cada una?

Asi podemos cerrar el tema de una manera mas clara!



La zona horaria es GMT -6. Ahora son las 11:18.