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

How can I center a circle & arrow in a border w/ CSS?

if i click the hit button the arrow should be move and touch the circle and change the color of the circle… o here im try to design the page so here i want o align the circle in leftside and center and arrow should be rightside and center

html

``` <body>
<h1>Bubble App</h1>

<section>
    <div class="container">

        <div class="circle" ></div>
        <div class="icon-arrow" style="display: flex; align-items: center; " ></div>


    </div>
    
</section>

<div class="button">
    <button onclick="hit()">Hit</button>
    <button onclick="reset()">Reset</button><br>
</div>

“`

im trying to align the circle and arrow to the center but it is not working circle is not aligned properly if i do chamges in circle then the position of the arrow will be changed how can i fix the problem

css

<style>

    section{
    border: 3px solid black;
    height: 60vh; 
    width: 90vh;   
    margin: auto;
   
    }

    h1{
        text-align: center;
    }

    
    

    .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
        position: relative;
        display: flex;
        align-items: center;
        
        
    }


    .icon-arrow{
        width: 90px;
        height: 3px;
        background-color: black;
        border-radius: 2px;
        position: relative;
        top: 49px;
        float: right;
        
    }

    .icon-arrow:after{
        content: '';
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: black;
        transform: rotate(45deg);
        position: absolute;
        left: -5px;
        top: 11px;
    }

    .icon-arrow:before{
        content: '';
        display: inline-block;
        width: 30px;
        height: 2px;
        background-color: black;
        transform: rotate(-45deg);
        position: absolute;
        right: 65px;
        bottom: 9px;
    }


    


</style>```

And also how can i align the button to the right side under the border section
Tags:

2

Answers


  1. 0

    Is this what you had in mind? I didn’t fully understand your question so if you need more help let me know.

    I added the display flex to the section because you wanted to center the elements according to this element with the border. Now the circle and arrow are centered in the border.

    .container{
border: 3px solid black;
height: 60vh; 
width: 90vh;   
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}

h1{
    text-align: center;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
}

.icon-arrow{
    width: 90px;
    height: 3px;
    background-color: black;
    border-radius: 2px;
    position: relative;
}

.icon-arrow:after{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(45deg);
    position: absolute;
    left: -5px;
    top: 11px;
}

.icon-arrow:before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(-45deg);
    position: absolute;
    right: 65px;
    bottom: 9px;
}


    
    <h1>Bubble App</h1>

<section class="container">
  <div class="circle" ></div>
  <div class="icon-arrow"></div>
</section>

<div class="button">
  <button onclick="hit()">Hit</button>
  <button onclick="reset()">Reset</button><br>
</div>
    Login or Signup to reply.
  2. 0

    I hope this will help you,I think you are asking this thing if I have understand it wrong please let me know & ask the question with some more details.

    .container{
border: 3px solid black;
height: 60vh; 
width: 90vh;   
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}

h1{
    text-align: center;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
}

.icon-arrow{
    width: 90px;
    height: 3px;
    background-color: black;
    border-radius: 2px;
    position: relative;
}

.icon-arrow:after{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(45deg);
    position: absolute;
    left: -5px;
    top: 11px;
}

.icon-arrow:before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: black;
    transform: rotate(-45deg);
    position: absolute;
    right: 65px;
    bottom: 9px;
}

.button {
    text-align: right;
}

    
    <h1>Bubble App</h1>

<section class="container">
  <div class="circle" ></div>
  <div class="icon-arrow"></div>
</section>

<div class="button">
  <button onclick="hit()">Hit</button>
  <button onclick="reset()">Reset</button><br>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search