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

Preguntas relacionadas

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

Nuevas preguntas

2 No se puede mover el cuadro con márgenes o izquierdaxx
2 ¿Cómo crear un campo de entrada receptivo en la barra de navegación?
2 Eliminar la clase no deseada del elemento
3 Agregar clase a un elemento que se carga en una página
2 ¿Cómo cargar una imagen de baja a alta resolución?
3 div absolutamente posicionado está cubriendo mi contenido
2 ¡El botón Enviar no funciona! Hacer clic en él ni siquiera en console.log
2 Tengo un problema de efecto de apariencia js
2 <li> el elemento en la barra de navegación se extiende demasiado hacia el lado derecho en dispositivos más pequeños en herramientas de desarrollo
2 ¿Cómo se puede eliminar una etiqueta de lista (o cualquier otro elemento HTML) usando un icono insertado en innerHTML del elemento padre por JavaScript?
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.

css...