CSS buttons in middle "Center"

Question

I have tried to place my buttons in the middle, but I have no idea what to do, as I'm not the best at CSS.

I don't know, if I'm doing it right in my code, but I have tried to place it in the center.

What should I do to place my buttons in the Middle of the screen?

<style>
    body {

    background-image: url(http://1-background.com/images/silk/grey-silk-website-background.jpg);

    }

    .button {
        display:block;
        text-align:center;
    }

    h1{
         text-align: center;
    }
    .remove{
        color: red;
        align-items: center;
    }

    .create{
        color: green;
        align-items: center;
    }

    .test{
        color: blue;
        align-items: center;
    }

</style>

<body>
    <form>
        <h1>
            <select id="mySelect" style="width:400px" size="10"  multiple>
                <option id=" hello">hello</option>

            </select>
            <br />
            <input type="text" name="name" value="text " style="width:350px" />
        </h1> 
    </form>
    <br>       
    <la class=" remove"><button onclick="myRemove()" style=" align-items: center;  width: 225px"><h2 class="remove"><img id="hi" src="http://outlooksettings.com/wp-content/uploads/2014/12/remove-md.png" width="40"> Remove</h2></button>
    </la>

    <la class="create"><button type="button" onclick="myCreate()"  style=" align-items: center; width: 225px"><h2  class="create"><img id="hi" src="https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Create.png" width="40">Create</h2></button>
    </la>

    <la class="test"><button type="button" onclick="test()" style=" align-items: center; width: 225px"><h2 style="width:80px" class="test"><img id="hi" src="https://lh4.ggpht.com/lUcLbewm2mffnhc1_BbZYi5zjEXAzfeYf73cg2SXjFDX3_xNnHGUMkSRdh86TN8HqcSq7Qr3vA=w512" width="40">File</h2></button>
    </la>

score 1 · Accepted Answer · edited May 23 '17 at 11:58

I would place them in a div and apply the following CSS to the div:

.my-div {
  width: 100%;
  text-align: center;
}

To learn more, check this out.

The result in your case:

<!DOCTYPE html>
<html xmlns = "http://www.TedTheSpeedlearner.com"
      xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation = "http://www.TedTheSpeedlearner.com 

SVG_Red_Circle.xsd">
<head>
<title>SVG Line</title>
<link rel = "stylesheet" type = "text/css" href = "SVG_Lines.css">
</link>
</head>
<style>
    body {

    background-image: url(http://1-background.com/images/silk/grey-silk-

website-background.jpg);

    }

    .button {
    display:block;
    text-align:center;
}

    h1{
         text-align: center;
    }
    .remove{
             color: red;
              align-items: center;
        }

     .create{
            color: green;
              align-items: center;
        }

      .test{
             color: blue;
              align-items: center;
        }

    .my-div {
      width: 100%;
      text-align: center;
    }

</style>

<body>

        <form>
            <h1>
                <select id="mySelect" style="width:400px" size="10"  multiple>
                <option id=" hello">hello</option>

                </select>
            <br />
                <input type="text" name="name" value="text " 

style="width:350px" /></h1> 

        </form>



    <br>

<div class="my-div">

    <la class=" remove"><button onclick="myRemove()" style=" align-items: 

center;  width: 225px"><h2 class="remove"><img id="hi" 

src="http://outlooksettings.com/wp-content/uploads/2014/12/remove-md.png" 

width="40"> Remove</h2></button></la>

    <la class="create"><button type="button" onclick="myCreate()"  style=" 

align-items: center; width: 225px"><h2  class="create"><img id="hi" 

src="https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Create.png" 

width="40">Create</h2></button></la>



    <la class="test"><button type="button" onclick="test()" style=" align-

items: center; width: 225px"><h2 style="width:80px" class="test"><img id="hi" 

src="https://lh4.ggpht.com/lUcLbewm2mffnhc1_BbZYi5zjEXAzfeYf73cg2SXjFDX3_xNnHGU

MkSRdh86TN8HqcSq7Qr3vA=w512" width="40">File</h2></button></la>

</div>

</body>
</html>

@Mikkel it will be great if you can mark your answer with a V. thanks — TechWisdom, Jun 26 '15 at 10:36

score 0 · Answer 2 · answered Jun 26 '15 at 09:50

Wrap the buttons in a div with a set width and apply margin: 0 auto

.button-wrapper {
    width: 685px;
    margin: 0 auto;
}
.button-wrapper > div {
    display: inline-block;
}
.button {
    display:block;
    text-align:center;
}
h1 {
    text-align: center;
}
.remove {
    color: red;
    align-items: center;
}
.create {
    color: green;
    align-items: center;
}
.test {
    color: blue;
    align-items: center;
}

<form>
     <h1>
                <select id="mySelect" style="width:400px" size="10"  multiple>
                <option id=" hello">hello</option>

                </select>
            <br />
                <input type="text" name="name" value="text " style="width:350px" /></h1> 
</form>
<br>
<div class="button-wrapper">
    <div class=" remove">
        <button onclick="myRemove()" style=" align-items: center;  width: 225px">
            <h2 class="remove"><img id="hi" src="http://outlooksettings.com/wp-content/uploads/2014/12/remove-md.png" width="40"> Remove</h2>
        </button>
    </div>
    <div class="create">
        <button type="button" onclick="myCreate()" style=" align-items: center; width: 225px">
            <h2 class="create"><img id="hi" src="https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Create.png" width="40">Create</h2>
        </button>
    </div>
    <div class="test">
        <button type="button" onclick="test()" style=" align-items: center; width: 225px">
            <h2 style="width:80px" class="test"><img id="hi" src="https://lh4.ggpht.com/lUcLbewm2mffnhc1_BbZYi5zjEXAzfeYf73cg2SXjFDX3_xNnHGUMkSRdh86TN8HqcSq7Qr3vA=w512" width="40">File</h2>
        </button>
    </div>
</div>

CSS buttons in middle "Center"

.

2 Answers2