Centre de texte et contenant à l'intérieur d'un cercle

J'ai un Bootply ici: http://www.bootply.com/XLGE6Vpjov

J'ai besoin de l'3 cercles de centre, il y conteneurs et puis j'ai besoin de le texte à l'intérieur pour être centré horizontalement et verticaly.

Comment puis-je centrer le texte verticalement?

Je sais que le border-radius ne fonctionne pas avec IE8, mais cela ne me dérange pas être un carré là.

        <div class="container">
            <div class="row">

                <div class="col-md-4 block text-center">
                    <p class="circle">Some Text here Some text here Some text here Some text here</p>
                </div>

                <div class="col-md-4 block">
                    <p class="circle">Some Text here</p>
                </div>

                <div class="col-md-4 block">
                    <p class="circle">Some More Text here</p>
                </div>

            </div>
        </div>


        .block{
            border: 1px solid red;
            text-align: center;
            vertical-align: middle;
        }
        .circle{
            background: red;
            border-radius: 200px;
            color: white;
            height: 200px;
            font-weight: bold;
            width: 200px;
        }
InformationsquelleAutor ttmt | 2014-11-05
  1. 16

    Vous pouvez essayer quelque chose comme cela http://jsfiddle.net/6cygbd37/1/

    Voir exemple ci-dessous :

    CSS:

    /*--CSS--*/
 .block {
    border: 1px solid red;
    text-align: center;
    vertical-align: middle;
}
.circle {
    background: red;
    border-radius: 200px;
    color: white;
    height: 200px;
    font-weight: bold;
    width: 200px;
    display: table;
    margin: 20px auto;
}
.circle p {
    vertical-align: middle;
    display: table-cell;
}

    HTML:

    <!--HTML-->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
 <div class="container">
    <div class="row">
        <div class="col-md-4 block">
            <div class="circle">
                <p>Some Text here Some text here</p>
            </div>
        </div>
        <div class="col-md-4 block">
            <div class="circle">
                <p>Some Text here</p>
            </div>
        </div>
        <div class="col-md-4 block">
            <div class="circle">
                <p>Some More Text here</p>
            </div>
        </div>
    </div>
</div>

    • Cette solution est la plus favorable à ce dont j'avais besoin. Merci!
    • Ouais le meilleur solutiion
    InformationsquelleAutor Bojan Petkovski
  2. 2

    Votre Réponse est ...

    CSS:

    .block{
            border: 1px solid red;
            text-align: center;
            vertical-align: middle;
        }
        .circle{
            background: red;
            border-radius: 200px;
            color: white;
            height: 200px;
            font-weight: bold;
            width: 200px;
        }
		.circle span{
			display: table-cell;
			padding-top:40%;
		}

    HTML:

    <div class="container">
	<div class="row">
      
  		<div class="col-md-4 block">
        	<p class="circle" align="center"><span>Some Text here Some text here Some text here</span></p>
    	</div>
      	
      	<div class="col-md-4 block">
      		<p class="circle" align="center"><span>Some Text here Some text here Some text here</span></p>
    	</div>
      
      	<div class="col-md-4 block">
      		<p class="circle" align="center"><span> Some text here</span></p>
    	</div>
  
  	</div>
</div>

    InformationsquelleAutor Avinash Antala
  3. 1

    Une solution pourrait être d'ajouter line-height:200px; à votre .circle classe de Sorte que la Hauteur de la ligne sera de la même taille que le cercle lui-même.

    .circle {
  /* your code */
  line-height:200px;
}
    InformationsquelleAutor Raul Marrero Rodríguez
  4. 1

    Vous pouvez utiliser display: table-cell au lieu de inline-block

    Exemple

    .circle {
  display: table-cell;
}
    InformationsquelleAutor Colin Bacon