0

tengo mal codigo de css , 2 span uno letra izquerdo y otro título centero. css por cada uno

.mt {
  border: 1px solid#000;
  width: 350px;
  
}

.mtitle {
  background: #007281;
  color: #fff;
  padding: 10px;
}

.mdesc {
  padding: 10px;
}
<div class="mt">
  
  <div class="mtitle">
    <span>A.</span><span>FOCOS DE INNOVACIÓN</span>
  </div>
  <div class="mdesc">
    es simplemente el texto de relleno de las imprentas y archivos de texto.
  </div>

</div>

sino un div, pero con display inline

introducir la descripción de la imagen aquí

3
  • Quieres separarlos, letra y título?
    – Carmen
    Commented el 14 jul. 2017 a las 16:02
  • @Carmen Si como maqueta Commented el 14 jul. 2017 a las 16:03
  • Te pongo respuesta
    – Carmen
    Commented el 14 jul. 2017 a las 16:04

2 respuestas 2

2

Al tener las etiquetas spam puedes asignarles directamente clases css

.mt {
  border: 1px solid#000;
  width: 350px;
  
}

.mtitle {
  background: #007281;
  color: #fff;
  padding: 10px;
text-align: center;
}

.mdesc {
  padding: 10px;
} 
.big, .ml {display: inline;}
.big{ font-size: 25px; width: 10%; float: left;}
.ml {width: 88%; text-align: center;}
<div class="mt">
  
  <div class="mtitle">
    <div class="big">A.</div><div class="ml">FOCOS DE INNOVACIÓN</div>
  </div>
  <div class="mdesc">
    es simplemente el texto de relleno de las imprentas y archivos de texto.
  </div>

</div>

4
  • esta bien gracias pero class ml puede text-center y no margin-left y mejor text-center porque otra letra y otros titulos largos y cortos Commented el 14 jul. 2017 a las 16:13
  • No se va a aplicar en el spam , tendrías que ponerlo en el div dentro del cual está el spam y afectaría a los dos spam. Puedes crear dos divs con display inline-block y el segundo con textalign center;
    – Carmen
    Commented el 14 jul. 2017 a las 16:16
  • puedes editar tu codigo Commented el 14 jul. 2017 a las 16:17
  • Editado, ya lo tienes con divs.
    – Carmen
    Commented el 14 jul. 2017 a las 16:31
1

Para resolverlo podrías hacer lo siguiente:

  • A mtitle indicarle que el texto dentro este centrado (eg: text-align: center).

  • Crear una nueva clase, por ejemplo mchar y hacer que flote a la izquierda (eg: float:left) y asignarsela al span que contiene la letra A

Así por ejemplo:

.mt {
  border: 1px solid#000;
  width: 350px;
}
.mtitle {
  background: #007281;
  color: #fff;
  padding: 10px;
  text-align: center;
  line-height: 24px;
}
.mchar {
  float: left;
  font-size: 24px;
}
.mdesc {
  padding: 10px;
}
<div class="mt">
  <div class="mtitle">
    <span class="mchar">A.</span>
    <span>FOCOS DE INNOVACIÓN</span>
  </div>
  <div class="mdesc">
    es simplemente el texto de relleno de las imprentas y archivos de texto.
  </div>
</div>

1
  • Muchas Gracias por tu explicarme. Commented el 14 jul. 2017 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.