Question 43767 in Html Question posted in
Some basic documentation can be found here.

Centering Icon in Div – Html

Click to see image I can’t get my icon in my div to center. Ive tried display block/Flex, justify content center, align text center. None of those want to center my icons in my div.

Heres my code so far : I have 3 circles with icons in each of them and I want them centered

<div class="iconDivHeadSubOne centerIcon">
            <div class="redCircle "><i class="bi bi-x"></i></div>
            <div class="yellowCircle ">
              <i class="bi bi-dash"></i>
            </div>
            <div class="greenCircle ">
              <i class="bi bi-chevron-expand centerIcon"></i>
            </div>
</div>

Heres all of the code so far and where the circles lay within:
<div class="iconHead">
        <div class="iconDivHeadOne centerIcon">
          <div class="iconDivHeadSubOne centerIcon">
            <div class="redCircle"><i class="bi bi-x"></i></div>
            <div class="yellowCircle">
              <i class="bi bi-dash"></i>
            </div>
            <div class="greenCircle centerIcon">
              <i class="bi bi-chevron-expand"></i>
            </div>
          </div>
          <div class="iconDivHeadSubTwo centerIcon">
            <i class="bi bi-layout-split gapAndSizing"></i>
            <div add left boarder to item></div>
            <i class="bi bi-chevron-down"></i>
          </div>
          <div class="iconDivHeadSubThree centerIcon">
            <i class="bi bi-chevron-left gapAndSizing"></i>
            <i class="bi bi-chevron-right gapAndSizing"></i>
          </div>
        </div>
        <div class="iconDivHeadTwo">
          <i class="bi bi-shield-shaded gapAndSizing"></i>
          <input
            type="url"
            placeholder="chrisfoehser.com/About-Me"
            id="urlInput"
          />
        </div>
        <div class="iconDivHeadThree">
          <i class="bi bi-box-arrow-up gapAndSizing"></i>
          <i class="bi bi-plus-lg gapAndSizing"></i>
          <i class="bi bi-grid gapAndSizing"></i>
        </div>
      </div>

CSS 
.centerIcon {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.redCircle {
  width: 15px;
  height: 15px;
  background: rgb(255, 76, 68);
  border-radius: 50%;
  margin: 7px;
  color: black;
}

.yellowCircle {
  width: 15px;
  height: 15px;
  background: rgb(255, 190, 0);
  border-radius: 50%;
  margin: 7px;
  color: black;
}

I cant seem to get the icons within the red, yellow, green circle to center themselves out. They stay cock eyed and out of the center. See picture linked.

Tags:

4

Answers


  1. 0

    It’s hard to solve it without checking your css/html:
    any way i applied the following styling to your div and it worked

    This controls the direct children of your .iconDivHeadSubOne

    .iconDivHeadSubOne>*{
  border:1px solid red;
  width:50px;
  height:50px;
  display:flex;
  justify-content:center;
  align-items:center
}
    Login or Signup to reply.
  2. 0 
    .centerIcon > * {
    display: flex;
    justify-content: center;
    align-items: center;
}
    Login or Signup to reply.
  3. 0

    I edited my code, (but i can’t get the icons like your image, i use x instead), below is the HTML and CSS i edited, i hope it will help you

    .iconDivHeadSubOne>*{ 
        display:flex;
        justify-content:center;
        align-items:center
    }
    .redCircle {    
        background: red; 
        border-radius: 50%;     
     }
     .yellowCircle {    
        background: yellow; 
        border-radius: 50%;     
     }
     .greenCircle {     
        background: green;
        border-radius: 50%;     
     }
    .centerIcon { 
        justify-content: center; 
        align-items: center; 
        display: flex; 
        flex-direction: row; 
    }
    .centerIcon>div{
        margin: 7px
    }
    .circle{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
   
    }
    <!DOCTYPE html>
<html>
<body>
<div class="iconDivHeadSubOne centerIcon">
            <div class="redCircle circle">
                <i class="bi bi-x">x</i>
            </div>
            <div class="yellowCircle circle">
              <i class="bi bi-dash">x</i>
            </div>
            <div class="greenCircle circle">
              <i class="bi bi-chevron-expand centerIcon">x</i>
            </div>
</div>

</body>
<style>
    .iconDivHeadSubOne>*{ 
        display:flex;
        justify-content:center;
        align-items:center
    }
    .redCircle {    
        background: red; 
        border-radius: 50%;     
     }
     .yellowCircle {    
        background: yellow; 
        border-radius: 50%;     
     }
     .greenCircle {     
        background: green;
        border-radius: 50%;     
     }
    .centerIcon { 
        justify-content: center; 
        align-items: center; 
        display: flex; 
        flex-direction: row; 
    }
    .centerIcon>div{
        margin: 7px
    }
    .circle{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
   
    }
</style>
</html>
    Login or Signup to reply.
  4. 0

    You can align items in center in many ways some of the css property to align it to center is done by the following methods:-
    * {

        text-align: center;

}

    you can align in center to a flex box by:

    section { 
  display: flex;
  justify-content: center;
 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search