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 respuestas
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>
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
Preguntas relacionadas
Nuevas preguntas
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.