Como poner contenido a la derecha de un titulo centrado

[axelb]

Buenas, me pasaron este código:

Código CSS:

.titulo-seccion {
  /*padding: .5rem 1rem;*/
  padding-right: 1rem;
  padding-left: 1rem;
  /*margin-bottom: .5rem;*/
  background-color: #0000001a;
}
 

Código PHP:

<div class="titulo-seccion">
    <h1 align="center">
        Cobranza <?php echo $nroCobranza?>
    </h1>
</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

[ArturoGallegos]

Antes de pedir ayuda debes intentar algo tu mismo, de lo contrario es mejor pasar a contratar a alguien que sepa del tema.

[axelb]

Hola ArturoGallegos, que no lo haya mencionado no quiere decir que no lo haya hecho...

[Rafael]

Código HTML:

<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:

<div class="Entre3">
   <div></div>
   <div></div>
   <div></div>
</div>
 

Cada elemento dentro lo pones que mida 33%

Código CSS:

.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.

[axelb]

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

[Rafael]

Oh, me faltó una cosa.

Código HTML:

.Entre3 div{width: 33%; display: inline-block;}
 

[axelb]

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

Ahora me quedó asi el codigo:

Código PHP:

<div class="titulo-seccion">
    <div></div>
    <div style="text-align:center"><h1>Cobranza <?php echo $nroCobranza?></h1></div>
    <div id="comprobantes">
        <div id="factura"><?php echo $factura?></div>
    <div id="recibo"><?php echo $recibo?></div>
    </div>
</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:

.titulo-seccion {
  /*padding: .5rem 1rem;*/
  padding-right: 1rem;
  padding-left: 1rem;
  margin-bottom: .5rem;
  background-color: #0000001a;
}
.titulo-seccion div{
    width: 33%;
    display:inline-block;
}
#comprobantes #recibo,#factura{
    font-size:12px;
    font-weight:bold;
    width: 45%; /*----------si pongo 50% queda uno debajo del otro vaya uno a saber porque-----------*/
    display:inline-block;
    text-align:center;
}
 

[Rafael]

Estudia esto: https://www.google.com/search?client...hings+centered

[axelb]

Nuevamente muchas gracias!

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

Código CSS:

vertical-align:text-bottom;
 

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

Código CSS:

display: flex;
align-items: center;
justify-content: center;
 

y algun que otro

Código CSS:

text-align: center
 

Solamente para satisfacer mi curiosidad, en tu primer respuesta Rafael decias que no se debía usar mas:

Código HTML:

<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

[tomerqueves]

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.

[axelb]

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!