Align buttons in html/css

Question

I'm trying to get my buttons aligned in my display. If I try to use float: right; nothing happends. Below you can find a screenshot:

So I'm trying to get these buttons all in a row below each other. I also tried using a table, but that one screws up my design of my hrefs Here you can find my html:

        <div class="LineField"> 
            <p>Axo 800</p>
            <a href="Planning.php?id=1"  class="LineButton">Planning</a>
            <a href="DataAnalyse.php?id=1"  class="LineButton">Data analyse</a> 
        </div>
        <div class="LineField">
            <p>JC-FSX</p>
            <a href="Planning.php?id=2"  class="LineButton">Planning</a>
            <a href="DataAnalyse.php?id=2"  class="LineButton">Data analyse</a>
        </div>

etc. etc.

css:

        .LineField
        {               
            width: 50%;
            height: 8%;
            margin-bottom: 15px;
            padding-top: 5px;   
            margin-left: auto;
            margin-right: auto;
            background: #191748;
            border: 0.1em #191748;
            border-radius: 1em;
            color: white;

            /* vertical alignment */
            display: flex;
            align-items:center;     
        }

        .LineField p
        {
            margin-left: 25px;
            margin-right: 25px;
            Font-size: 200%;
        }
        .LineButton
        {
            border-radius: 0.5em;
            width: 30%;
            height: 50%;
            background: linear-gradient(#ffffff, #c4c4ff);
            margin-left: 3%;
            margin-right: 3%;
            padding-top: 5px;
            color: #191748;
            font-size: 150%;
            font-weight: 500;   
            text-decoration: none;      
        }

Setting a specific width to your p elements will resolve your buttons alignment issue. — MAQ Khan
– MAQ Khan, Commented Feb 2, 2016 at 9:41
It will be a lot more easier to achieve the desired alignment using the grid system of bootstrap — Imran Ali
– Imran Ali, Commented Feb 2, 2016 at 9:44
@Maqk, ye lol. Thats actually pretty easy. Havent thought about that one.... — Bart88
– Bart88, Commented Feb 2, 2016 at 9:45

MAQ Khan · Accepted Answer · 2016-02-02 09:46:21Z

1

You can set the width for the p element like below

    .LineField p
    {
        margin-left: 25px;
        margin-right: 25px;
        Font-size: 200%;
        width: 130px;
    }

Updated Code Here

answered Feb 2, 2016 at 9:46

MAQ Khan

5251 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pang · Accepted Answer · 2017-05-08 10:43:14Z

1

Just use the CSS below:

.LineField p {
   margin-left: 25px;
   margin-right: 25px;
   Font-size: 200%;

   float: left;
   width: 16%;
}

edited May 8, 2017 at 10:43

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Feb 2, 2016 at 9:59

J.media

114 bronze badges

Comments

King · Accepted Answer · 2016-02-02 09:57:35Z

0

You can set the width of LineButton class like below

 .LineButton
    {
        border-radius: 0.5em;
        width:50%;
        height: 50%;
        background: linear-gradient(#ffffff, #c4c4ff);
        margin-left: 1%;
        margin-right: 1%;
        padding-top: 5px;
        padding-left: 5%;
        color: #191748;
        font-size: 150%;
        font-weight: 500;   
        text-decoration: none;      
    }

Please see the updated code below

Sample Code

answered Feb 2, 2016 at 9:57

King

2342 silver badges17 bronze badges

Collectives™ on Stack Overflow

Align buttons in html/css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related