Alinear elementos de diferentes tamaños

[Drumpi]

Qué raro, no hay HTML como código para elegir en el desplegable de nuevos mensajes...

Bueno, no me quiero enrollar. Lo mismo es una duda tonta, o lo mismo es imposible de verlo sin el proyecto. El caso es que tengo esta cabecera.


Y el código que la genera es este:

@model MiModelo

<div class="row">
    <div class="col-lg-8">
        <a class="fa fa-caret-left" asp-controller="PController" asp-action="Index"> @ViewBag.localize["ButtonBack"]</a>
        <b>|</b> @Model.docNum <b>|</b> @Model.status <b>|</b> @Model.cardName
    </div>
    <div class="col-lg-3">
        <b class="col-lg-1">|</b>
        <span class="well well-sm col-lg-4" style="text-align: center; color: black; display: inline-block">@Model.fechaIniPlan.ToString("dd/MM/yyyy")</span>
        <b class="fa fa-long-arrow-right text-center col-lg-2"></b>
        <span class="well well-sm col-lg-4" style="text-align: center; color: black; display: inline-block">@Model.fechaFinPlan.ToString("dd/MM/yyyy")</span>
        <b class="col-lg-1">|</b>
    </div>
    
    
    <a class="btn btn-success col-lg-1" style="vertical-align:middle" asp-action="StartOp" asp-route-id="@Model.Id" asp-route-docEntry="@Model.docEntry">@ViewBag.localize["ButtonStart"]</a>

</div>

<div class="row">
    <h2 class="pull-left" style="display: inline; margin-left: 15px">@Model.Name</h2>
    @*<h2 class="pull-right" style="display: inline; margin-right: 15px">11:24:37</h2>*@
</div>

El código es HTML, bueno, es Razor, que viene a ser una mezcla de HTML y parte de C# que genera HTML. También uso Bootstrap con un "tema visual" Startmin para que se vea todo más "bonito".
Bueno, el caso es que son dos filas. En la primera, la pare de la derecha (el div class="col-lg-3") necesito que los separadores y la flecha se vean centrados en altura, y no sé cómo hacerlo. Cuando uso el examinador de Chrome, la flecha por ejemplo, me dice que la altura de la fila es la altura del carácter, no la altura de los recuadros de las flechas o del botón, y no he conseguido que me lo alinee bien.

A ver si alguno de vosotros sabéis cómo hacerlo. Gracias.

[josepzin]

Si estas usando Bootstrap, tiene unas clases para alinear en vertical (y para de todo) asi evitas esos style=

Por ejemplo:

style="text-align: center; color: black; display: inline-block"

Se debería convertir en estas clases: align-middle text-dark d-inline-block
Que las clases de BS están mas retocadas que poner el estilo asi directamente.

Con el tema alineación te recomendaría que mires los ejemplos en la documentación de BS, que a mi me salvan la vida constantemente.

https://getbootstrap.com/docs/5.3/la...olumns-gutters

A veces la alineación funciona de una manera u otra según el modelo de cajas... quizas en tu caso con el align-middle ya te valga. A veces hace falta agregarle margin-auto (que no estoy seguro que sea asi tal cual), en fin, que yo muchas veces entre la documentacion, los ejemplos, el debuger/consola del navegador y probando voy solucionando estas cosas.

[juanvvc]

Justo lo que dice josepzin, usa las clases de bootstrap

Simplemente añado que algunas de esas clases no se aplican a los elementos en sí, sino al contenedor donde estén los elementos

[josepzin]

Otra cosa, no uses esto:

<b class="col-lg-1">|</b>

Aunque yo supongo que funciona igual, el B es para poner negrita, bold, que ahora mismo es < STRONG >

Lo correcto sería esto: <div class="col-lg-1">|</div>
De hecho en los que usas SPAN también deberías usar DIV

Los SPAN son para (según tengo entendido) usar adentro de un parrafo de texto o cosas puntuales dentro de un DIV.

-----Actualizado-----

En Boostrap tiene muchisimas cosas para evitar tener que usar los styles="... de hecho, se puede conseguir hacer casi todo usando solo un archivo de estilos muy pequeñito para las cosas puntuales que no se pueden hacer con BS.

[selecter25]

Otra cosa, no uses esto:

<b class="col-lg-1">|</b>

Aunque yo supongo que funciona igual, el B es para poner negrita, bold, que ahora mismo es < STRONG >

Lo correcto sería esto: <div class="col-lg-1">|</div>
De hecho en los que usas SPAN también deberías usar DIV

Los SPAN son para (según tengo entendido) usar adentro de un parrafo de texto o cosas puntuales dentro de un DIV.

-----Actualizado-----

En Boostrap tiene muchisimas cosas para evitar tener que usar los styles="... de hecho, se puede conseguir hacer casi todo usando solo un archivo de estilos muy pequeñito para las cosas puntuales que no se pueden hacer con BS.

Sastamente, yo lo ando usando ahora con Angular y cuando le he pillado el rollo, no he vuelto a usar un styles="" hulio, como mucho meto algún css adicional para meter alguna animación, imagen de fondo o hover guapos, en 4 veces que consultes la documentación estás hecho un pro.

Con "col" le indicas que es una columna, el número es el ancho de columnas que ocupa el elemento (en un máximo de 12) en un grid, y los modificadores de en medio son breakpoints para hacer el responsive dependiendo del tamaño de la ventana, basados en min-width (sm es small, md medio, lg grande etc...). Hay que usar <div para manejar bien el flexbox.

Hoy justo acabé la primera parte de la integración del backend del proyecto que tenemos entre manos en las prácticas, y al revisarme el código el instructor, me ha felicitado por hacer que mis vistas en Bootstrap no parezcan Bootstrap , he tirado de muchas cosillas nuevas de BS5, como el menú offcanvas que él no había visto, y le he metido estilos por detrás para quitar el tufillo. Ha funcionado, mis dos compis becarios se han pasado al lado oscuro.

[Drumpi]

Gracias por los consejos y los enlaces, los iré probando, especialmente la documentación.
Lo de usar style más que nada es por no ponerme a leer, entre otras cosas, todos los estilos que hay en los CSS que hay en el proyecto, que son unos cuantos, bastante larguitos, y tediosos. Revisaré esos class, a ver si los tengo y se pueden aplicar.

En cuanto a usar </b> y </span>, sí, ya probé a usar </div>, pero eso provocaba que me escribiera los elementos uno debajo del otro, y necesitaba que estuvieran en la misma línea. Después de mucho buscar, son las soluciones que encontré.

-----Actualizado-----

Sastamente, yo lo ando usando ahora con Angular y cuando le he pillado el rollo, no he vuelto a usar un styles="" hulio, como mucho meto algún css adicional para meter alguna animación, imagen de fondo o hover guapos, en 4 veces que consultes la documentación estás hecho un pro.

Con "col" le indicas que es una columna, el número es el ancho de columnas que ocupa el elemento (en un máximo de 12) en un grid, y los modificadores de en medio son breakpoints para hacer el responsive dependiendo del tamaño de la ventana, basados en min-width (sm es small, md medio, lg grande etc...). Hay que usar <div para manejar bien el flexbox.

Hoy justo acabé la primera parte de la integración del backend del proyecto que tenemos entre manos en las prácticas, y al revisarme el código el instructor, me ha felicitado por hacer que mis vistas en Bootstrap no parezcan Bootstrap , he tirado de muchas cosillas nuevas de BS5, como el menú offcanvas que él no había visto, y le he metido estilos por detrás para quitar el tufillo. Ha funcionado, mis dos compis becarios se han pasado al lado oscuro.

Ya, pero es lo que digo, aún usando col-* se me ponen los elementos uno encima del otro, y no en la misma línea, ignoro la razón. Ya me he estado peleando con ellos, y los he entendido... salvo la parte de usar *-sm-*, *-lg-* y demás modificadores de tamaño. A ver, sé que eso es por la resolución de la ventana, pero ¿no hay un modificador global para todos los tamaños, como un valor por defecto? Me obliga a usar siempre un indicador de tamaño.

Una de las cosas que me faltan es documentación de BS, aparte de un curso con ejercicios, de JS, que pueda ir haciendo en los ratos que el ordenador esté compilando, en lugar de estar escribiendo en el foro... ¡oh, wait...!


De hecho, para las barras verticales ni siquiera debería estar usando col-*, deberian ocupar el ancho del propio caracter/cuadro de texto/botón, pero si no lo pongo, me empieza a dejar espacios delante o detrás, a escribirse en diferentes líneas y cosas así :S.

[josepzin]

Ahhh eso puede ser porque que en alguna parte del CSS "heredado" tienes definido div { display: block}, asi que todos los DIVs los toma como bloques y por eso los pasa para abajo. Eso es un problema.

-----Actualizado-----

Si usas el debugger (F12) del navegador puedes ir mirando los estilos y buscar el estilo que hace ese BLOCK, el problema es que si lo quitas seguramente hay lugares en que hace falta que esté para funcionar bien.

-----Actualizado-----

Te pones sobre el elemento, boton derecho > inspeccionar y te abre la consola con el HTML y CSS

[juanvvc]

O más probablemente, porque no has definido el contenedor como clase container: https://getbootstrap.com/docs/5.0/layout/containers/

-----Actualizado-----

Ah, y que col-lg-3 y todos los demás es un tipo de col que solo aplica en pantallas grandes, así que tienes que definirlos también como col para el resto de pantallas: https://getbootstrap.com/docs/5.0/layout/grid/

"col col-lg-3"

[Drumpi]

Estoy viendo que div está definido con un display: block;
Normalmente, cada "bloque" indica en qué fichero están definidos esos atributos (por ejemplo, bootstrap.min.css:5), pero este bloque muestra las palabras "user agent stylesheet". No sé qué quiere decir, pero por lo visto, está definido así.

Respecto a la alineación, hasta ahora, he podido comprobar que, si a la flecha le pongo, dentro de style un padding de 10px, entonces sí que se alinea. Ni usando align-middle ni margin-auto, tanto como class como style, han funcionado. Lo digo por si os da una pista.

[juanvvc]

Sí, div suele ser es un block por defecto en los navegadores habituales

Por eso tienes que usar las clases container y col adecuadas, para que le quiten el block

Sigo pensando que en tu caso te falta poner container al contenedor y col al div

Margin-auto es para alineado horizontal y align-middle si recuerdo bien para el vertical. Pero no van a funcionar como intuyes, seguramente: son atributos de contenedores. Por eso se lo tienes que poner al contenedor de tu texto, no al texto en sí.