En mi sitio web www.drivkrets.se Estoy tratando de insertar un símbolo (líneas naranjas) antes de mis encabezados usando CSS: before. He podido insertar la imagen en el tamaño correcto, pero ahora me gustaría alinear verticalmente la imagen del símbolo con el texto. Cuando el encabezado está en una o tres líneas, no me veo bien. He intentado diferentes variaciones de código pero ninguna de ellas funciona.

¿Alguien tiene alguna idea de cómo debo hacer esto?

Los encabezados que suponen tener este símbolo antes he llamado ".specialrubrik". Ahora estoy usando el código:

.specialrubrik:before { 
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-     
 marker-e1490098005864.png');
float: left;
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}

Saludos cordiales Peter

css wordpress vertical-alignment
2
Peter Lundvik 21 mar. 2017 a las 22:22

2 respuestas

La mejor respuesta

Esta es una pregunta de CSS y no tiene nada que ver con WordPress. No desea flotar elementos inline-block, y vertical-align solo funciona con elementos display: inline-block.

.example-heading:before {
  display: inline-block; /* no floats! 'middle' only works with inline-block */
  content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-marker-e1490098005864.png');
  vertical-align: middle;
  margin-right: 12px;
}
<h2 class='example-heading'>Example heading</h2>
0
hungerstar 21 mar. 2017 a las 19:33

Gracias por tu idea @sheriffderek. Todavía no lo entiendo bien. He cambiado el código ahora e intento usar el: before en h2 en su lugar.

h2:before { 
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-     
marker-e1490098005864.png');
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}

h2 { 
text-align: left;
display: -webkit-inline-box;
vertical-align: middle;
}

Funciona cuando tengo un encabezado corto, pero si el encabezado es de dos o tres filas, parece extraño. Ejemplo: "Kunskap och uppfinningsrikedom hasta era elsystem". ¿Sabes cómo puedo hacer que todo el texto fluya a la derecha del símbolo?

Peter

0
Peter Lundvik 22 mar. 2017 a las 09:27
42936363

Preguntas relacionadas

15 ¿Es posible aplicar CSS a la mitad de un personaje?

Nuevas preguntas

2 Mostrar nuevos elementos en una lista en la parte superior
3 El texto alinea el centro o el margen izquierdo y el margen derecho no se centra en el botón en CSS
2 ¿Cómo se cambia el color de fondo de toda la columna de una columna de cuadrícula?
2 Cómo aplicar ngclass para una fila específica en la tabla html usando angular
2 Ocultar algunos elementos mientras los elementos específicos aparecen al pasar el mouse. ¿cómo? estoy practicando hacer un menú desplegable
2 Apila imágenes verticalmente a la derecha junto a un video
2 ngStyle se activa dos veces
3 Elemento oculto incluso cuando la opacidad es 1
3 Elementos div lado a lado con flotador para elemento de audio
2 MENOS clase declarada en sí misma
Nuevas preguntas con la etiqueta css >

css

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo de representación utilizado para describir el aspecto y el formato de documentos HTML (HyperText Markup Language), XML (Extensible Markup Language) y elementos SVG que incluyen (pero no se limitan a) colores, diseño, fuentes, y animaciones. También describe cómo se deben representar los elementos en la pantalla, en papel, en el habla o en otros medios.

Más sobre css...