居中 HTML 对象 - 这包括标签、文本输入框和按钮？答案

【问题标题】：Centring HTML Objects - This includes labels, text input boxes and buttons?居中 HTML 对象 - 这包括标签、文本输入框和按钮？
【发布时间】：2021-04-16 17:05:15
【问题描述】：

各位程序员，您好，我已经为我的网页创建了一个搜索表单，它允许用户使用三个不同的字段来优化他们的搜索。我一直在尝试将这些对象与搜索页面的主标题对齐。我尝试了许多不同的方法，但似乎将对象移动到中心。这真的让我很烦恼，我不知道如何解决这个问题！有什么建议吗？

 <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>

【问题讨论】：

请提供代码，没有代码我们如何测试？

标签： php html css mysql

【解决方案1】：

将所有 4 个div 上的margin-bottom: 30px; 更改为margin: 30px auto;

如果您希望居中对齐，还可以添加 text-align:center; 以及此 margin: 30px auto;

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

【讨论】：