php - Centring HTML Objects - This includes labels, text input boxes and buttons?

Question

Hello fellow programmers, I have created a search form for my webpage which allows users to use three different fields to refine their search. I have been trying to align these objects with the main heading of the search page. I have tried many different methods but seems to move the objects into the centre. It's really bugging me and I have no clue in how to fix this! Any recommendations?

 <p style="text-align:center">View Recipes which satisfy the following criteria:</p>
    <div class="container cols justify-content center"> 
    <div style="margin-bottom: 30px; width: 300px;">
        <label  for="author">By Author:</label>
        <select   name="author" id="author">
        <option value="">Any Author</option>
        <?php foreach ($authors as $author): ?>
            <option value="<?php html($author['id']);?>"><?php html($author['name']);?></option>
            <?php endforeach;?>
        </select>
    </div>
    <div style="margin-bottom: 30px; width: 300px;">
        <label for="category">By Category:</label>
        <select name="category" id="category">
        <option value="">Any Category</option>
        <?php foreach ($categories as $category): ?>
            <option value="<?php html($category['id']);?>"><?php html($category['name']);?></option>
            <?php endforeach;?>
        </select>
    </div>
    <div style="margin-bottom: 30px; width: 300px;">
        <label for="text">Containing Text:</label>
        <input type="text" name="text" id="text">
    </div>
    <div style="margin-bottom: 30px; width: 300px;">

        <input class="btn btn-primary" type="submit" name="action" value="Search">
    </div>
    </div>
</form>
</div>

question from:https://stackoverflow.com/questions/65672217/centring-html-objects-this-includes-labels-text-input-boxes-and-buttons

Answer 1

Change the margin-bottom: 30px; on all 4 div to margin: 30px auto;

If you want the align to centre then also add text-align:center; along with this margin: 30px auto;

Codepen: https://codepen.io/manaskhandelwal1/pen/PoGdxpa