个人中心
gpt4 book ai didi

html - CSS 居中对齐文本输入、文本区域和选择选项

转载 作者：太空宇宙 更新时间：2023-11-03 19:56:31 25 4
gpt4 key购买 nike

我一直在尝试在我的 CSS 中使用文本居中对齐来对齐我的表单，但无济于事。我从下面的代码中省略了 CSS。字体样式在我想要的和我拥有的之间看起来也不同。我也不知道如何更改 CSS 中的字体样式。这是我的 html 表单:

                <!DOCTYPE html>
                <html lang="en">
                <head>
                <title>Add/Edit Supplier</title>
                <style>
                </style>
                </head>
                <body>
                <strong>Add/Edit Supplier</strong><hr>

                <?php
                echo form_open('supplier/save', array('name' => 'supplier_add'));    
                ?>

                <label>Supplier</label>
                <input type="text" name="supplier" id="supplier"> <br/>

                <label>PIN</label>
                <input type="text" name="taxpin" id="taxpin"> <br/>

                <label>Contact</label>
                <input type="text" name="contact" id="contact"> <br/>

                <label>Address</label>
                <textarea  name="addresss" id="addresss"></textarea> <br/>

                <label>City</label>
                <select name="citys" id="citys">>
                <option value="">All</option>
                <?php

                foreach($cities as $city)
                {
                echo '<option value="'.$city['cityidd'].'">'.$city['city'].'</option>';
                }
                ?>  
                </select> <br/>


                <label>Telephone</label>
                <input type="text" name="telephone" id="telephone"> <br/>

                <label>Email</label>
                <input type="text" name="email" id="email"> <br/>

                <label>Website</label>
                <input type="text" name="website" id="website"> <br/>

                <label>Payment Mode</label>
                <select name="paymentmodes" id="paymentmodes">>
                <option value="">--Please select--</option>
                <?php
                foreach($modes as $mode)
                {
                echo "<option value='".$mode['id']."'>".$mode['paymentmode']."</option>";
                }
                ?>  
                </select> <br/>

                <label>KES Account</label>
                <input type="number" name="kesaccount" id="kesaccount"> <br/>

                <label>USD Account</label>
                <input type="number" name="usdaccount" id="usdaccount"> <br/>

                <label>Bank</label>
                <select name="banks" id="banks">
                <option value="">--Please select--</option>
                <?php
                foreach($banks as $bank)
                {
                echo '<option value="'.$bank['id'].'">'.$bank['bankname'].'</option>';

                }
                ?>  
                </select> <br/>

                <label>Bank Branch</label>
                <select name="bankbranches" id="bankbranches">
                <option value=""></option>
                </select> <br/>

                <script type= text/javascript>
                $('#banks').on('change', function() {
                var bank = $(this).val();
                $.ajax({
                type: 'post',
                url: 'supplier/get_branches',
                data: { bank_id : bank },
                success: function (response) {
                $('#bankbranches').html(response); 
                }
                });
                });
                </script>

                <label>Bank Branch Code</label>
                <input type="number" name="bankcode" id="bankcode"> <br/>

                <label>SWIFT</label>
                <input type="text" name="swiftcode" id="swiftcode"> <br/>

                <label>Mobile Payment Number</label>
                <input type="number" name="mobilepaymentnumber" id="mobilepaymentnumber"> <br/>

                <label>Mobile Payment Name</label>
                <input type="number" name="mobilepaymentname" id="mobilepaymentname"> <br/>

                <label>Cheque Addressee</label>
                <input type="number" name="chequeddressee" id="chequeaddressee"> <br/>

                <label>Status</label>
                <input type="radio" name="status" value="1" checked="checked">Yes
                <input type="radio" name="status" value="0">No <br/>

                <label>Category</label>
                <select name="categorysuppliers" id="categorysuppliers">
                <option value="">--Please select--</option>
                <?php
                foreach($categories as $category)
                {
                echo '<option value="'.$category['id'].'">'.$category['supplycategory'].'</option>';
                }
                ?>  
                </select> <br/>

                <label>Staff</label>
                <select name="staff" id="staff">>
                <option value="">--Non Staff--</option>
                <?php

                foreach($staffs as $staff)
                {
                echo '<option value="">'.$staff['firstname'].' '.$staff['lastname'].'</option>';
                }
                ?>  
                </select> <br/>

                <input type="submit" name="submit" id="submit" value="Save Details" class="btn">
                <?php
                echo form_close();
                ?>
                </form>
                </body>
                </html>

这是它在网络浏览器中的样子:

How my html form looks in the browser

这就是我希望我的 html 表单的样子:

enter image description here

除了使用文本居中对齐外，我不知道如何实现这一点，到目前为止，我的 html 表单还没有达到我想要的效果。

最佳答案

在您的问题中没有解决任何其他问题，这是一个简单的示例，其中包含您表单的一小部分:

label {
  display: inline-block;
  width: 25%;
}
<label>Supplier</label>
<input type="text" name="supplier" id="supplier">
<br/>

<label>PIN</label>
<input type="text" name="taxpin" id="taxpin">
<br/>

<label>Contact</label>
<input type="text" name="contact" id="contact">
<br/>

输入下方有一个按钮:

label {
  display: inline-block;
  width: 25%;
}

button{
    margin-left: 25%;
}
<label>Supplier</label>
<input type="text" name="supplier" id="supplier">
<br/>

<label>PIN</label>
<input type="text" name="taxpin" id="taxpin">
<br/>

<label>Contact</label>
<input type="text" name="contact" id="contact">
<br/>
<br />
<button type="submit">Submit</button>

关于html - CSS 居中对齐文本输入、文本区域和选择选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40316922/

25 4 0
文章推荐： MATLAB:如何将 cellfun 与结构一起使用？
文章推荐： python - 在Python中从列表中随机选择时是否加载了所有方法的值？
文章推荐： matlab - 从Matlab中的共生矩阵计算熵
文章推荐： 与跨行和列执行的多个 fft (1D) 相比，Matlab fft2 (2D) 给出了交换值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com