How to Center the Center Circle

How to center the center circle?

You need to give your middle container, appropriate padding,It will help bringing the content to the center.

You can achieve the same by giving a left i.e. making your .middle as:

.middle {
    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}

Also, you have to give your child div.circle a specific width and height combined with border-radius to align it and to give it a shape of circle.

And finally you need to play with the margin of the inner circle to align it.

see this fiddle

How to center align circles?

Using the flexbox display type, you can easily achieve this:

.dashboard-grey-menu {  height: 30vh;  background-color: #959595;  display: flex;  align-items: center;}.row {  display: flex;  justify-content: space-around;  width: 100%;}.circle {  border-radius: 50%;  width: 10vw;  height: 15vh;  background-color: #B7B7B7;  display: flex;  align-items: center;  justify-content: space-around;}

<div class="dashboard-grey-menu">  <div class="row no-padding">    <div class="col">      <div class="circle">Foobar</div>    </div>    <div class="col">      <div class="circle">Foo</div>    </div>    <div class="col">      <div class="circle">Bar</div>    </div>    <div class="col">      <div class="circle">Baz</div>    </div>  </div></div>

How to center a inner circle using css

Another way to do this is by using Flexbox.

If you add the following to your parent:

display: flex;
align-items: center;
justify-content: center;

And remove the relative positioning from the child element, the child element will be centered inside the parent.

div.container{  border:1px solid red;  position:relative;}span.parent{  display: flex;  align-items: center;  justify-content: center;  width:30px;  height:30px;  border:1px solid gray;  border-radius:50%;  text-align: center;  position:absolute;  right:20px;  top:10px;}
span.child{  background:green;  width:80%;  height:80%;  display:inline-block;  border-radius:50%;}

<div class="container">  <p>some info goes here</p>  <span class="parent"><span class="child"></span></span></div>

Center a circle in the middle of a div

Add class d-flex justify-content-center align-items-center for col-md-1 or CSS Change

.numberCircleInOut {
  border-radius: 50%;
  height: 38px;
  width: 38px;
  border: 2px solid #484848;
  color: #484848;
  display:flex;
  align-items:center;
  justify-content:center;
 }

<div class="row d-flex justify-content-center align-items-center" style="margin: unset; width: 100%">
<div class="col-md-1 py-2 d-flex justify-content-center align-items-center" style="background-color: #E5E5E5;">
    <div class="numberCircleInOut"> 124 </div>
</div>
<div class="col-md-11" style="background-color: #FFFFFF;">
    Motion timeout
</div>

https://jsfiddle.net/lalji1051/j3axm9f6/9/

elements center of circle in CSS

Did you try Flexbox? It's an easy way to design flexible responsive layout structure.

CSS:

.container { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

HTML:

<div class="container">
  <div>Text</div>
  <div>Text</div>
</div>

Vertically and horizontally centering text in circle in CSS (like iphone notification badge)

Horizontal centering is easy: text-align: center;. Vertical centering of text inside an element can be done by setting line-height equal to the container height, but this has subtle differences between browsers. On small elements, like a notification badge, these are more pronounced.

Better is to set line-height equal to font-size (or slightly smaller) and use padding. You'll have to adjust your height to accomodate.

Here's a CSS-only, single <div> solution that looks pretty iPhone-like. They expand with content.

Demo: http://jsfiddle.net/ThinkingStiff/mLW47/

Output:

CSS:

.badge {
    background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 16px; 
    min-width: 14px;
    padding: 4px 3px 0 3px;
    text-align: center;
}

HTML:

<div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">44</div>
<div class="badge">55</div>
<div class="badge">666</div>
<div class="badge">777</div>
<div class="badge">8888</div>
<div class="badge">9999</div>

How to perfectly center a plus sign in a circle using CSS

I ended up going with this:

<span class="container"><span>+</span></span>

With the following CSS:

.container {
    display: block;
    border: 2px solid white;
    border-radius: 50%;
    height: 20px;
    width: 20px;
}

.container span {
    position: absolute;
    top: -7px;
    left: 2px;
}

Align circles in the center on mobiles

Kindly change your CSS from

.circle {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    background: #ea4335;
    vertical-align: top;
    display: inline-block;
}

to this

.circle {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    background: #ea4335;
    vertical-align: top;
    display: block;
    padding-top: 10px;
    margin: auto;
}

And it will work perfectly fine. I just made these elements block give them an auto margin and give some top padding to the text.

How do I center this number inside the circle? - CSS

Set line-height to the height of the box and use text-align: center;

So you would get, for example :

div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

How to center logo inside of circle?

A simple "text-align: center" to all of your lis (.ul2 li) will center the icons.

The code you provided seems to be vertically centered unlike the image you sent. If you want to center an item vertically and horizontally, one thing you can do is use flexbox styling. For items in a row (declaring display: flex defaults to a row direction), "justify-content" horizontally aligns while "align-items" vertically aligns items.

display: flex;
justify-content: center;
align-items: center;

.ul2{
  display: flex;
}
.ul2 li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  text-align: center;
  transition: .5s;
}
.ul2 li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
.ul2 li:nth-child(1):before{
  background: #4267B2;
}
.ul2 li:nth-child(2):before{
  background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
  background: #E1306C;
}
.ul2 li:nth-child(4):before{
  background: #2867B2;
}
.ul2 li:nth-child(5):before{
  background: #ff0000;
}
.ul2 li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}
.con{
  position: relative;
  height: 500px;
  width: 400px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  transition: 0.3s ease-out;
}
.con:hover{
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.3s ease-out;
}
.con:hover .image{
  transform: translateY(-100px);
}
.image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}
.con:hover .image img{
  opacity: 0.7;
}
.con:hover .image{
 transform: translateY(-100px);
}

.con:hover > ul > li > a{
  opacity: 1;
  transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
  transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
  transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
  transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
  transition-delay: 0.4s;
}
.con .content{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.info{
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #000;
  line-height: 26px;
}
.info h2{
  font-size: 27px;
  margin: 3px 0;
}
.info span{
  color: #1a1a1a;
}

<head>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>

---

Related Topics