CODEWITHSUNDEEP
htmlcss
adamjamesb
adamjamesb

Reputation: 35

Centering 3 buttons within div on the page using CSS

I have 3 buttons that I'm looking to keep central on the page, however as the window gets wider the buttons skew off from central (shown in image).

What would be the HTML/CSS to fix this so that they are always perfectly central?

It seems as if it is skewing more to the left, leaving extra space on the right.

screenshot of issue

    <body>
        <h1 class="title">Creative Checker</h1>
        <div class="row">
            <div class="col-12 col-md-10 offset-md-1">
                <div class="alert alert-success" style="display: none">
                </div>
                <div class="alert alert-danger" style="display: none">
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p class="text-center">
                            1. Select product type:
                        </p>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-4">
                        <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
                    </div>
                    <div class="col-lg-4">
                        <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
                    </div>
                    <div class="col-lg-4">
                        <button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
                    </div>
                </div>
                <div class="row">                   
                    <div class="col-lg-12">
                        <p class="text-center">
                            2. Upload folder/images:
                        </p>
                        <form action="server.php"
                            class="dropzone"
                            id="my-awesome-dropzone"
                            onsubmit="onSubmit()">
                            <!-- <select name="product-type" id="product_type">
                                <option value="snapshot">
                                    Snapshot
                                </option>
                                <option value="TMD">                                
                                    TMD
                                </option>
                                <option value="b-push">
                                    Behavioural Push
                                </option>
                            </select> -->                       
                        </form>
                    </div>
                </div>          
            </div>  
        </div>

#btn-snapshot {
    z-index: 39;
    width: 250px;
    min-height: 15px;
    background-color: #75ACE0;
    border-radius: 20px;
    position: relative;
}

#btn-tmd {
    z-index: 39;
    width: 250px;
    min-height: 15px;
    background-color: #75ACE0;
    border-radius: 20px;
    position: relative;
}

#btn-bpush {
    z-index: 39;
    width: 250px;
    min-height: 15px;
    background-color: #75ACE0;
    border-radius: 20px;
    position: relative;
}

Upvotes: 0

Views: 616

Answers (4)

akhtarvahid
akhtarvahid

Reputation: 9769

Are you looking like this?

.row {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
}
.btn {
  color: white;
  background: #45C9F8;
  border: none;
  padding: 8px 40px;
  border-radius: 50px;
}
<div class="row mb-3">
    <div class="col-lg-4">
        <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
    </div>
    <div class="col-lg-4">
        <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
    </div>
    <div class="col-lg-4">
        <button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
        </div>
</div>

Upvotes: 0

Arpit Bhatia
Arpit Bhatia

Reputation: 173

HTML code: <div class="container">

<div class="row">

<div class="col">

` <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>`

</div>

<div class="col">

 ` <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>`

</div>

`<div class="col">`

  `<button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>`

</div>

</div>

</div>

CSS:

.row { background: #f8f9fa; margin-top: 20px; }

.col { border: solid 0px #6c757d; padding: 10px; }

Here is a working bootstrap fiddle a link for the same.

Upvotes: 0

GhastlyCode
GhastlyCode

Reputation: 268

Purely from the information given at the moment I can only suggest ensuring that the class row mb-3 is set at 100% width.

.row mb-3 {
  width: 100%;
}

If this doesn't fix your issue, post your CSS code so we can see what styles you have applied. It'll make troubleshooting easier.

Upvotes: 0

Allan Jebaraj
Allan Jebaraj

Reputation: 1077

Add the class text-center to col-lg-4 and the button will be centered.

If bootstrap is not available, add the following CSS code to your file.

.text-center{
    text-align: center;
}

Upvotes: 2

Related Questions