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

3 ¿Cómo agregar estilo para palabras específicas en HTML usando JavaScript?
2 El pie de página no puede ir debajo de la barra lateral
2 Compruebe si se corrigen múltiples afirmaciones si se corrigen, cuando no deben venir una acción
3 ¿Cómo mover una imagen de fondo en Hover?
2 Elemento de deslizamiento de Pure-CSS interactuando de forma extraña con <audio> Elemento
4 ¿Por qué el menú móvil no funciona en primer clic, pero funciona bien en los clics posteriores?
3 TIP de herramientas que no se muestra solo en el flotador
3 Cómo hacer un botón encajar en un icono de Upvote
2 Dos contenedores en la misma línea, pero el segundo toma el espacio de 2 a partir de la 2ª línea
2 Alinee los botones a la izquierda, centro y derecha en bootstrap
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...