Center text and container inside a circle

HTML & CSS
1

Hi all

I have a bootply here - http://www.bootply.com/mljeQxbUyc

I need the 3 circles centered in there containers and then i need the text inside to be centered horizontally and verticaly.

How can I center the text vertically

I know the border radius won’t work in IE8 but I don’t mind it being a square there.

<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;
}
2

HI,

These things are best done by coming out of the bootstrap grid and just using display:table and display table-cell instead of floats.

However you can probably achieve what you want like this. Change your circle rule to this and add the new rule for the span underneath.

.circle {
	background: red;
	border-radius:50%;
	color: black;
	display:table;
	height: 200px;
	font-weight: bold;
	font-size: 1.2em;
	width: auto;
	margin:0 auto;
}
.circle span {
	display:table-cell;
	vertical-align:middle;
	height:200px;
	width:200px;
	text-align:center;
	padding: 0 15px;
}

Then you will need to add the span into your html.

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

you have to keep in mind that , while you can ‘easily’ center text in a circle, there is no way (yet) to wrap the text so that it stays within the bounds of a circle. so it is advisable rot calculate some padding into the mix.

here is an alternate way of doing the this trick ( bonus, you only have to declare the width of your circle)

	<style>
			p{
				background: pink;
				border-radius: 50%;
				width: 20%;
				padding:2em;
				box-sizing: border-box;
				text-align: center;
			}
			p:before {
				content:'';
				height:0;
				margin:100% 0 0 0;
				display:inline-block;
				vertical-align: middle;
			}

		        p span { display: inline-block;  vertical-align: middle;}
		
	</style>	

	<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</span></p>

hope that helps

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.