CODEWITHSUNDEEP
htmlcss
Rudheim
Rudheim

Reputation: 51

How to center buttons

Just started learning CSS. I managed to align buttons to the left. But I want to have them in the center. When I am changing float:left to float:center, buttons appear in the center, but size of the buttons changes depending on the text inside, I want them all to be the same size as in the first picture and without margins. https://i.sstatic.net/gsaAO.png https://i.sstatic.net/N8M2o.png

.button{
    width: 80px;
    padding: 12px;
    float: center;
    font-family: arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: lightblue;  
 }
  <div id="List">
           
                    <a class="button">HTML</a>
                    <a class="button">CSS</a>
                    <a class="button">JavaScript</a>
                    <a class="button">C#</a>
                    <a class="button" href="Unity.html">Unity</a>
                
         </div>

Upvotes: 3

Views: 156

Answers (3)

Mat Sz
Mat Sz

Reputation: 2552

Don't use float for anything besides aligning images within text.

The proper solution would be to use display: flex; and align-items: center;, like so: (also, don't forget to set flex: 0; on the button)

.list {
    display: flex;
    justify-content: center;
}

.button {
    width: 80px;
    padding: 12px;
    font-family: arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: lightblue;
    flex: 0; 
}
<div id="List" class="list">
  <a class="button">HTML</a>
  <a class="button">CSS</a>
  <a class="button">JavaScript</a>
  <a class="button">C#</a>
  <a class="button" href="Unity.html">Unity</a>
</div>

Upvotes: 1

damnitrahul
damnitrahul

Reputation: 150

Instead of using float on your buttons Use Margin Auto on your parent container. Also avoid using floats as much as you can, Now that Modern features like Flexbox and Grid are available. 

#list{
margin : 0 auto;
}

Upvotes: 1

Itay Ganor
Itay Ganor

Reputation: 4205

float: center is not a thing:

enter image description here

I'd recommend getting into learning flexbox, as your problem can be solved using it simply:

#List {
  display: flex;
  justify-content: center;
}

.button {
  width: 80px;
  padding: 12px;
  font-family: arial;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: lightblue;
}
<div id="List">

  <a class="button">HTML</a>
  <a class="button">CSS</a>
  <a class="button">JavaScript</a>
  <a class="button">C#</a>
  <a class="button" href="Unity.html">Unity</a>

</div>

Upvotes: 6

Related Questions