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

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

转载作者：太空宇宙更新时间：2023-11-03 19:56:31

25

4

我一直在尝试在我的 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>

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

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

除了使用文本居中对齐外，我不知道如何实现这一点，到目前为止，我的 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 与结构一起使用？

文章推荐： matlab - 从Matlab中的共生矩阵计算熵

java - JPA 选择(选择)
是否有某种方法可以使用 JPA 或 Hibernate Crtiteria API 来表示这种 SQL？或者我应该将其作为 native 执行吗？ SELECT A.X FROM (SELECT X,
mysql - 选择 1 - 选择 2
在查询中， select id,name,feature,marks from (....) 我想删除其 id 在另一个 select 语句中存在的那些。从 (...) 中选择 id 我是 sql
javascript - 选择 HTML 选择/下拉列表中的项目时会触发什么事件？
我想响应用户在 select 元素中选择一个项目。然而这个 jQuery: $('#platypusDropDown').select(function () { alert('You sel
sql - 选择..来自(选择..来自..)。如何改进此查询？
这个问题在这里已经有了答案: SQL select only rows with max value on a column [duplicate] (27 个回答) 关闭8年前。我正在学习 SQL
php - mysqli查询(选择)不起作用(选择)php
This question already has answers here: “Notice: Undefined variable”, “Notice: Undefined index”, and
php - SQL - 如果存在 - 选择 A - 否则 - 选择 B
我在 php 脚本中调用 SQL。有时“DE”中没有值，如果是这种情况我想从“EN”中获取值应该是这样的，但不是这样的 IF (EXISTS (SELECT epf_application_deta
mysql - 选择 TableName.Col1 VS 选择 Col1
这可能是一个奇怪的问题，但不知道如何研究它。执行以下查询时: SELECT Foo.col1, Foo.col2, Foo.col3 FROM Foo INNER JOIN Bar ON
javascript - 如何在 phonegap 中同时使用相机 API 选择(选择)多张图像？
如何在使用 Camera.DestinationType.FILE_URI. 时在 phonegap camera API 中同时选择或拾取多个图像我能够一次只选择一张图像。我可以使用 this 在
sql-server - 如果存在(选择 1...)与如果存在(选择 TOP 1 1...)
这是一个纯粹的学术问题。这两个陈述实际上是否相同？ IF EXISTS (SELECT TOP 1 1 FROM Table1) SELECT 1 ELSE SELECT 0 相对 IF EXIS
java - JSoup 根据 Id 选择 Div，根据 title 选择 href
我使用 JSoup 来解析 HTML 响应。我有多个 Div 标签。我必须根据 ID 选择 Div 标签。我的伪代码是这样的 Document divTag = Jsoup.connect(link
JavaScript 选择
我正在处理一个具有多个选择框的表单。当用户从 selectbox1 中选择一个选项时，我需要 selectbox2 active 的另一个值。同样，当他选择 selectbox2 的另一个值时，我需要
jQuery 选择
Acme Inc. Christa Woods Charlotte Freeman Jeffrey Walton Ella Hubbard Se
php数据库连接/选择
我有一个login.html其中form定义如下: First Initial Plus Last Name : 我的do_authorize如下: "; pri
JavaScript 选择
$.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data
Javascript 选择
我有一个下拉列表“磅”、“克”、“千克”和“盎司”。我想要这样一种情况，当我选择 gram 来执行一个函数时，当我在输入字段中输入一个值时，当我选择 pounds 时，我想要另一个函数来执行时我在输入
GLSL channel 选择
我有一个 GLSL 着色器，它从输入纹理的 channel 之一(例如 R)读取，然后写入输出纹理中的同一 channel 。该 channel 必须由用户选择。我现在能想到的就是使用一个 int
html - 如何根据下拉列表中的选定数字生成表单输入字段(选择)
我想根据下拉列表中的选定值生成输入文本框。 Options 2 3 4 5 就在这个选择框之后，一些输入字段应该按照选定的数字出现。最佳答案我建议您使用响应式(Reac
优先选择列值的 SQL 选择
我是 SQL 新手，我想问一下如何根据首选项和分组选择条目。 +----------+----------+------+ | ENTRY_ID | ROUTE_ID | TYPE | +------
sql - 选择 * 进入失败
我有以下表结构: CREATE TABLE [dbo].[UTS_USERCLIENT_MAPPING_USER_LIST] ( [MAPPING_ID] [int] IDENTITY(1,1
vba 选择/删除除第一个以外的所有工作表
我在移除不必要的床单时遇到了问题。我查看了不同的论坛并将不同的解决方案混合在一起。此宏删除工作表(第一张工作表除外)。 Sub wrong() Dim sht As Object Applicati

首页

博学

6Ren·AI

商城

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