html - sirve - Técnica CSS para una línea horizontal con palabras en el medio.
line middle css (20)
Aquí está la solución basada en Flex.
HTML:
<h1>Today</h1>
CSS:
h1 {
display: flex;
flex-direction: row;
}
h1:before, h1:after{
content: "";
flex: 1 1;
border-bottom: 1px solid #000;
margin: auto;
}
Estoy tratando de hacer una regla horizontal con algún texto en el medio. Por ejemplo:
----------------------------------- mi título aquí ------------ -----------------
¿Hay alguna manera de hacer eso en CSS? Sin todos los guiones "-" obviamente.
De tantas alternativas, preferiría esta respuesta, ya que se cruza con los navegadores actuales.
Lo uso más que uno de mi homepage de homepage . Como se recomienda tener solo un único <h1> especialmente en la página principal. Por lo tanto, es necesario cambiar h1 a h2 o superior.
h2 {margin-top:50px;
display:flex;
background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h2:before, h2:after {
color:white;
content:'''';
flex:1;
border-bottom:groove 2px;
margin:auto 0.25em;
box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h2>side lines via flex</h2>
Después de probar diferentes soluciones, vine con una válida para diferentes anchos de texto, cualquier fondo posible y sin agregar marcas adicionales.
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
<h1>Heading</h1>
<h1>This is a longer heading</h1>
Lo probé en IE8, IE9, Firefox y Chrome. Puede comprobarlo aquí http://jsfiddle.net/Puigcerber/vLwDf/1/
Esto le da un ancho de línea estática, pero funciona muy bien. El ancho de línea se controla agregando o tomando ''/ 00a0'' (un espacio Unicode).
h1:before, h1:after {
content:''/00a0/00a0/00a0/00a0'';
text-decoration: line-through;
margin: auto 0.5em;
}
<h1>side lines</h1>
He estado buscando algunas soluciones para esta sencilla decoración y he encontrado bastantes, algunas extrañas, algunas incluso con JS para calcular la altura de la fuente y bla, bla, bla, luego he leído el una en este post y leí un comentario de treintadot hablando sobre fieldset y legend y pensé que eso era todo.
Estoy reemplazando esos estilos de 2 elementos, creo que podrías copiar los estándares de W3C e incluirlos en tu clase de .middle-line-text media (o como quieras llamarlo) pero esto es lo que hice:
<fieldset class="featured-header">
<legend>Your text goes here</legend>
</fieldset>
<style>
.featured-header{
border-bottom: none;
border-left: none;
border-right: none;
text-align: center;
}
.featured-header legend{
-webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
-webkit-padding-end: 8px;
background: transparent; /** It''s cool because you don''t need to fill your bg-color as you would need to in some of the other examples that you can find (: */
font-weight: normal; /* I preffer the text to be regular instead of bold */
color: YOU_CHOOSE;
}
</style>
Aquí está el violín: http://jsfiddle.net/legnaleama/3t7wjpa2/
He jugado con los estilos de borde y también funciona en Android;) (Probado en kitkat 4.XX)
EDITAR:
Siguiendo la idea de Bekerov Artur, que también es una buena opción, he cambiado la imagen .png base64 para crear el trazo con un .SVG para que pueda renderizar en cualquier resolución y también cambiar el color del elemento sin ningún otro software involucrado :)
/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' xmlns:xlink=''http://www.w3.org/1999/xlink'' x=''0px'' y=''0px'' width=''1px'' height=''1px'' viewBox=''0 0 1 1'' enable-background=''new 0 0 1 1'' fill=''%23ff6600'' xml:space=''preserve''><rect width=''1'' height=''1''/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
He intentado la mayoría de las formas sugeridas, pero termina con algunos problemas como el ancho completo o No es adecuado para contenido dinámico. Finalmente modifiqué un código, y funciona perfectamente. Este código de ejemplo dibujará esas líneas antes y después, y es flexible en el cambio de contenido. Centro alineado también.
HTML
<div style="text-align:center">
<h1>
<span >S</span>
</h1>
</div>
<div style="text-align:center">
<h1>
<span >Long text</span>
</h1>
</div>
CSS
h1 {
display: inline-block;
position: relative;
text-align: center;
}
h1 span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
h1:before {
background: #ddd;
content: "";
height: 1px;
position: absolute;
top: 50%;
width: calc(100% + 50px);//Support in modern browsers
left: -25px;
}
h1:before {
left: ;
}
Resultado: https://jsfiddle.net/fasilkk/vowqfnb9/
Más fácil de lo que he visto, sin :before y :after http://codepen.io/bekerov/pen/QwbaNR
No estoy muy seguro, pero podría intentar usar una regla horizontal y empujar el texto por encima de su margen superior. Necesitará un ancho fijo en su etiqueta de párrafo y un fondo también. Es un poco intrincado y no sé si funcionará en todos los navegadores, y usted necesita establecer el margen negativo según el tamaño de la fuente. Aunque funciona en cromo.
<style>
p{ margin-top:-20px; background:#fff; width:20px;}
</style>
<hr><p>def</p>
No para vencer a un caballo muerto, pero estaba buscando una solución, terminé aquí y no estaba satisfecho con las opciones, sobre todo porque no pude conseguir que las soluciones proporcionadas funcionen bien para mí. (Probablemente debido a errores de mi parte ...) Pero he estado jugando con flexbox y aquí hay algo que sí pude hacer por mi cuenta.
Algunas de las configuraciones están cableadas, pero solo para fines de demostración. Creo que esta solución debería funcionar en casi cualquier navegador moderno. Simplemente elimine / ajuste la configuración fija para la clase .flex-parent, ajuste los colores / texto / material y (espero) estará tan contento como yo con este enfoque.
HTML:
.flex-parent {
display: flex;
width: 300px;
height: 20px;
align-items: center;
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #000;
border: 1px #000 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
}
<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">I found this simpler!</div>
<div class="flex-child-edge"></div>
</div>
También guardé mi solución aquí: https://jsfiddle.net/Wellspring/wupj1y1a/1/
Ok, este es más complicado pero funciona en todo menos en IE <8
<div><span>text TEXT</span></div>
div {
text-align: center;
position: relative;
}
span {
display: inline-block;
}
span:before,
span:after {
border-top: 1px solid black;
display: block;
height: 1px;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.2em;
}
span:after {
right: 0;
left: auto;
}
Los elementos: antes y después están posicionados absolutamente para que podamos tirar de uno hacia la izquierda y otro hacia la derecha. Además, el ancho (40% en este caso) es muy dependiente del ancho del texto interior. Hay que pensar en una solución para eso. Al menos la top: 1.2em asegura que las líneas se mantengan más o menos en el centro del texto, incluso si tiene un tamaño de fuente diferente.
Sin embargo, parece funcionar bien: http://jsfiddle.net/tUGrf/3/
Otro método más:
span:after,
span:before{
content:"/00a0/00a0/00a0/00a0/00a0";
text-decoration:line-through;
}
<span> your text </span>
Para mi esta solución funciona perfectamente bien ...
HTML
<h2 class="strikethough"><span>Testing Text</span></h2>
CSS
.strikethough {
width:100%;
text-align:left;
border-bottom: 1px solid #bcbcbc;
overflow: inherit;
margin:0px 0 30px;
font-size: 16px;
color:#757575;
}
.strikethough span {
background:#fff;
padding:0 20px 0px 0px;
position: relative;
top: 10px;
}
Si alguien se pregunta cómo configurar el encabezado de manera que aparezca con una distancia fija hacia el lado izquierdo (y no centrado como se muestra arriba), lo resolví modificando el código de @Puigcerber.
h1 {
white-space: nowrap;
overflow: hidden;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
}
h1:before {
right: 0.3em;
width: 50px;
}
h1:after {
left: 0.3em;
width: 100%;
}
Aquí el JSFiddle .
Utilizo un diseño de tabla para rellenar los lados dinámicamente y divs de altura absoluta y posición 0 para el posicionamiento vertical dinámico:
- sin dimensiones rígidas
- Sin imágenes
- sin pseudo-elementos
- respeta el fondo
- aspecto de la barra de control
https://jsfiddle.net/eq5gz5xL/18/
Encontré que un poco por debajo del centro verdadero se ve mejor con el texto; esto se puede ajustar donde está el 55% (la altura más alta hace que la barra sea más baja). La apariencia de la línea se puede cambiar donde está el border-bottom .
HTML:
<div class="title">
<div class="title-row">
<div class="bar-container">
<div class="bar"></div>
</div>
<div class="text">
Title
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
CSS:
.title{
display: table;
width: 100%
background: linear-gradient(to right, white, lightgray);
}
.title-row{
display: table-row;
}
.bar-container {
display: table-cell;
position: relative;
width: 50%;
}
.bar {
position: absolute;
width: 100%;
top: 55%;
border-bottom: 1px solid black;
}
.text {
display: table-cell;
padding-left: 5px;
padding-right: 5px;
font-size: 36px;
}
esto es más o menos como lo haría: la línea se crea al establecer un border-bottom en el h2 contiene y, a continuación, le da al h2 una line-height menor. Luego, el texto se coloca en un span anidado con un fondo no transparente.
HTML:
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>
CSS:
h2 {
width: 100%;
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
padding:0 10px;
}
Lo probé solo en Chrome, pero no hay razón para que no funcione en otros navegadores.
JSFiddle: http://jsfiddle.net/7jGHS/
para más tarde (en la actualidad) navegador, display:flex yd pseudo-elements hace que sea fácil de dibujar. border-style , box-shadow e incluso el background también ayudan al maquillaje.
h1 {margin-top:50px;
display:flex;
background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
color:white;
content:'''';
flex:1;
border-bottom:groove 2px;
margin:auto 0.25em;
box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h1>side lines via flex</h1>
Solución para IE8 y más reciente ...
Cuestiones dignas de mención:
Usar background-color para enmascarar un borde puede no ser la mejor solución. Si tiene un color de fondo (o imagen) complejo (o desconocido), el enmascaramiento finalmente fallará. Además, si cambia el tamaño del texto, notará que el color de fondo blanco (o lo que establezca) comenzará a cubrir el texto en la línea de arriba (o abajo).
Tampoco querrá "estimar" la amplitud de las secciones, porque hace que los estilos sean muy inflexibles y casi imposibles de implementar en un sitio sensible donde el ancho del contenido está cambiando.
Solución:
( Ver JSFiddle )
En lugar de "enmascarar" un borde con un background-color , use su propiedad de display .
HTML
<div class="group">
<div class="item line"></div>
<div class="item text">This is a test</div>
<div class="item line"></div>
</div>
CSS
.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }
Cambie el tamaño de su texto colocando su propiedad de font-size en el elemento .group .
Limitaciones:
- No hay texto multilínea. Solo líneas individuales.
- El formato HTML no es tan elegante
-
toppropiedadtopen el elemento.linedebe ser la mitad deline-heightdeline-height. Por lo tanto, si tiene unaline-heightdeline-heightde1.5em, entonces latopdebe ser-.75em. Esto es una limitación porque no está automatizado, y si está aplicando estos estilos en elementos con alturas de línea diferentes, es posible que deba volver a aplicar su estilo deline-height.
Para mí, estas limitaciones superan los "problemas" que noté al principio de mi respuesta para la mayoría de las implementaciones.
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.35);
margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
<div class="hr-sect">Text</div>
<div><span>text TEXT</span></div>
div {
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: white;
display: inline-block;
}
Asigne un espacio al espacio para hacer más espacio entre el texto y la línea.
Ejemplo: http://jsfiddle.net/tUGrf/
h6 {
font: 14px sans-serif;
margin-top: 20px;
text-align: center;
text-transform: uppercase;
font-weight: 900;
}
h6.background {
position: relative;
z-index: 1;
margin-top: 0%;
width:85%;
margin-left:6%;
}
h6.background span {
background: #fff;
padding: 0 15px;
}
h6.background:before {
border-top: 2px solid #dfdfdf;
content: "";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 50%;
left: 0;
right: 0;
bottom: 0;
width: 95%;
z-index: -1;
}
Esto te ayudara
entre linea