0
146
Vistascss: no se puede centrar verticalmente con el estilo de fuente "El tipo más afortunado"
Encuentro que no puedo centrar verticalmente el espacio con el estilo de fuente " Luckiest Guy ".
Traté de aplicar display: flex;align-items: center; en el span pero no funciona.
aplicación.vue
<template> <div id="app"> <span>Luckiest Guy Font</span> </div> </template> <script> export default { name: "App", }; </script> <style lang="scss"> @import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap"); #app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; background-color: grey; margin-top: 60px; span { font-family: "Luckiest Guy", Helvetica, Arial, sans-serif; font-size: 19px; line-height: 19px; display: flex; align-items: center; } } </style> Caja de arena de código:
https://codesandbox.io/s/cool-browser-lh9f8?file=/src/App.vue:441-453
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Su código no tiene problema y funciona bien. Tal vez tenga algunas otras clases que afecten a esta etiqueta.
También puede configurar vertical-align:baseline; en estilos de etiquetas de intervalo.
.span-style{ display:flex; align-items:center; justify-content:center; border:1px solid black; height:40px; vertical-align:baseline; } <div> <span class="span-style"> Hello world </span> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta