I'm currently trying to align buttons in div to get the effect in the photo below, all I want to have all at center of page, small circles should be in separate div because by default they are invisible so it's easier to change parameter of div than four buttons. Now I have stopped at this point:  

[![What I have](https://i.stack.imgur.com/jeQmG.png)](https://i.stack.imgur.com/jeQmG.png)

below is what I want:  

[![What I want](https://i.stack.imgur.com/5RA2m.png)](https://i.stack.imgur.com/5RA2m.png)

```css
 .guzik {
    background-color: white;
    display: inline-block;
    padding: 0 2px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid black;
    margin: 20px;
}
.guzik1 {
    display: inline-block;
    vertical-align: middle;
    background-color:white;
    padding: 0 0px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 1px solid black;
    font-size: 9px;
}
```

```html
<div>
      <input name="1" type="button" class="guzik1" id="k 0+1" />
      <input name="2" type="button" class="guzik1" id="k 0+2" />
      <input name="3" type="button" class="guzik1" id="k 0+3" />
      <input name="4" type="button" class="guzik1" id="k 0+4" />
      <input name="Color1" type="button" class="guzik" id="0+1" onclick="changeColor1(id)" />
      <input name="Color2" type="button" class="guzik" id="0+2" onclick="changeColor1(id)" />
      <input name="Color3" type="button" class="guzik" id="0+3" onclick="changeColor1(id)" />
      <input name="Color4" type="button" class="guzik" id="0+4" onclick="changeColor1(id)" />
</div>
```