Yo no lo haría dentro de un <p>.. más bien usaria un <div> y dentro el párrafo con texto.
Código HTML :
<div class="circulo"><p>Con Respeto y Amor</p></div>
<div class="circulo"><p>Con Respeto y Amor</p></div>
<div class="circulo"><p>Con Respeto y Amor</p></div>
<div class="circulo"><p>Con Respeto y Amor</p></div>
<div class="circulo"><p>Con Respeto y Amor</p></div>
Código CSS :
.circulo {
background-color: red;
border-radius: 50%;
color: white;
display: inline-block;
text-align: center;
vertical-align: middle;
width:80px;
height:80px;
}
p{
margin:0;
padding:.5em;
}
Con
border-radius al
50% te aseguras que el elemento siempre sea un circulo (siempre y cuando su alto y su ancho sean iguales).
display: inline-block permite que se coloquen uno al lado del otro.
vertical-align con valor
middle sirve para que estén verticalmente centrados entre si.
Después tenes que jugar un poco con el ancho y alto del circulo, y también con los márgenes, paddings y tamaño del texto hasta lograr lo que buscas.
Te dejo el ejemplo:
http://codepen.io/anon/pen/ZGpgQZ
Saludos
