1

Estoy tratando de hacer un circulo con un icono en el medio pero sin hacer el width y height fijos. En este momento tengo esto:

.service {
  width: 150px;
  height: 150px;
  padding: 50%;
  background-color: #6D435A;
  color: #fff;
  border-radius: 50%;
  margin: 5px;
  border: solid 1px #FFFCF9;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="service">
    <i class="fa fa-check fa-1x" aria-hidden="true"></i>
</div>

¿Cómo puedo hacer un círculo perfecto sin hacer los width ni height fijos? Y, ¿cómo poner el texto en el medio? Supongo que habrá un método más eficiente que hacer el padding: 50%...

2
  • 1
    ¿Y cuál es la pregunta/problema? Commented el 21 sept. 2017 a las 15:20
  • @pablolozano Acabo de editar poniendo la pregunta al final
    – Lukas
    Commented el 21 sept. 2017 a las 15:28

2 respuestas 2

4

Para centrar el contenido en tu círculo puedes utilizar flex.

#circulo {
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: red;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
#circulo > p {
	font-family: sans-serif;
	color: white;
	font-size: 1rem;
	font-weight: bold;
}
<div id="circulo">
  <p>Hola StackOverflow en Español.</p>
</div>

Sobre si hay una manera de hacer un círculo fijo sin height ni width, sí: http://jsfiddle.net/y4Ede/90/

2
  • Gracias compañero! :)
    – Lukas
    Commented el 21 sept. 2017 a las 15:41
  • @dddenis el SO esta pidiendo usar Bootstrap. Creo que lo adecuado seria responderle con tal.
    – GDP
    Commented el 21 sept. 2017 a las 15:43
2

Usando la clase rounded-circle en bootstrap, recortaras la imagen en forma de un circulo. Luego usa los % para definir un tamaño equivalente a otro elemento (div, body...)

.tamano10{
width: 10%
}
.tamano20{
width: 20%
}
.tamano30{
width: 30%
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">


    <div class="container">
        <div class="row">
            <div class="col-xs-7">                
                <img src="http://images.all-free-download.com/images/graphiclarge/abstract_vector_background_3_148511.jpg" class="rounded-circle tamano10" />
                <img src="http://images.all-free-download.com/images/graphiclarge/abstract_vector_background_3_148511.jpg" class="rounded-circle tamano20" />
                <img src="http://images.all-free-download.com/images/graphiclarge/abstract_vector_background_3_148511.jpg" class="rounded-circle tamano30" />                
                
            </div>
        </div>
    </div>

2
  • y para los width existen en Bootstrap 4 los helpers Commented el 21 sept. 2017 a las 16:22
  • @aldanux el problema que tengo, almenos con los w-25, es que no acepta por ejemplo w-10 o w-30
    – GDP
    Commented el 22 sept. 2017 a las 6:22

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.