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

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