input标签使用margin 居中无效

最新推荐文章于 2024-11-08 17:58:40 发布
最新推荐文章于 2024-11-08 17:58:40 发布
阅读量1.5k 收藏
点赞数 2
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45632660/article/details/119182560
版权
  • input按钮居中无效示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中</title>
    <style>
        input {
            width: 120px;
            height: 40px;
            background-color: red;
            border: 0px;
            border-radius: 6px;
            margin: 0 auto;
           
        }

    </style>
</head>
<body>
    <input type="button" value="居中">
</body>
</html>

在这里插入图片描述可以看到，margin: 0 auto并没有生效。
这是因为，margin: 0 auto 只对块元素生效，而input标签自身就是个行内块元素，并不是块元素所以不生效。
使用display转换为块元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中</title>
    <style>
        input {
            width: 120px;
            height: 40px;
            background-color: red;
            border: 0px;
            border-radius: 6px;
            margin: 0 auto;
            display: block;
        }

    </style>
</head>
<body>
    <input type="button" value="居中">
</body>
</html>

在这里插入图片描述成功解决了input标签居中不生效问题。

uniapp-扩展小常识
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
01-01 1625
uniapp-扩展小常识，Uniapp是一个使用Vue.js开发所有前端应用的框架，开发者可以使用Vue.js的语法和开发体验，编写一套代码，同时将其编译为多个平台的应用，包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等。这种跨平台开发的能力极大地节省了开发成本和时间，提高了开发效率，为开发者带来了诸多便利。
鸿蒙5.0版开发：ArkTS基础组件（TextInput）
m0_69424697的博客
09-21 1771
单行文本输入框组件。
Firefox下input button内文字不能垂直居中的解决方法
09-25
在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己弄了个私有属性，解决方法很简单，遇到类似问题的朋友可以学习下，希望可以帮助到大家
关于调整input里面的输入光标大小
fyqcdbdx的专栏
12-07 1万+
以前在项目里碰到过一个问题 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高，chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。 初步结论如下： IE：不管该行有没
如何解决＜input＞标签无法居中的问题?
qq_44823936的博客
08-19 2131
如何解决<input>标签无法居中的问题? 在网上找了很久如何解决<input>标签无法居中的问题，也尝试过很多方法，最后成功解决了! 解决办法：在<input>标签外添加一层<div>标签
CSS：margin设置无效解决方案
zcc9618的博客
05-16 6837
参考网址：http://www.php.cn/css-tutorial-413352.html margin设置无效解决方案：用 css 给需要设置 margin 的上一层添加text-align:center; HTML 1 2 3 <div class="wrap"> <h3>这是一个内联块<...
html 中input 框 与文字不能垂直居中, 怎么解决?
daoshud1的专栏
08-28 1万+
呢称 就是给Input加上vertical-align:middle属性。 将支持valign 特性的对象的内容与对象中部对齐 或 css添加下面两个属性 1) vertical-align:middle 2) 定义line-height: 属性， 让line-height 等于height 这样应该就能兼容所有的浏览器 比如 .td { vertical-al
FF(火狐浏览器)下解决按钮的水平居中
09-25
在火狐浏览器中，如果尝试通过设置`padding-bottom`来使按钮内的文本垂直居中，你会发现这样做是无效的。这是因为`::-moz-focus-inner`伪元素的存在，它会覆盖按钮内文本的垂直对齐方式。为了解决这个问题，我们可以...
鸿蒙OpenHarmony【TextInput】ArkTS文本与输入
asfn123123的博客
11-08 1670
单行文本输入框组件。
HarmonyOS应用开发：TextInput（基础组件）
situnanQAQ的博客
06-12 1639
单行文本输入框组件。
input框文字不垂直居中解决方案
przlovecsdn的博客
08-16 7832
可采用浮动的方式使input框文字垂直居中 &lt;div class="info-content clearfix"&gt; &lt;div class="info-text"&gt;联系电话:&lt;/div&gt; &lt;input type="tel" name="mobile" value="" id="co
input文本框、文字、按钮、图片 垂直居中对齐的解决办法
热门推荐
familyGo的专栏
07-27 2万+
1.input 文本框 文字垂直居中对齐 表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下 input type="text" style="font-size:12px;line-heigh
＜input＞button居中显示
qq_43145360的博客
08-25 3876
<p align=center> <input type="button" value="value"> </p>
IE6和7的input继承margin-left这样的属性解决方案
LzwGlory的专栏
08-21 1346
为了不改变你原始父元素的样式定义，推荐的解决办法就是： 给input元素外面套一个span,label这样的内联元素，这样就会消除bug。 原理很简单，input父元素是内敛元素，就不会继承margin-left了。
【小程序】input输入框属性及上下左右居中的示例（图文+代码）
【敦厚的曹操】的专栏
07-15 7659
input输入框属性说明及示例（图文+代码）
ie8下div中单个input的margin和padding失效
11-05 3028
如题，需要将input外面再包一层span标签解决
php中用input上下表格对齐,分享input文字垂直居中和按钮对齐问题的实例教程
weixin_42516600的博客
03-18 418
1、盒子模型问题：请CSS重置2、按钮不对齐：请浮动或者vertical-align:middle;然后计算宽高，使其对齐 ；3、IE8文本不居中：line-height属性 注意：IE8不支持font写法(或者某个样式不支持)IE浏览器测试到IE8，IE5、6、7慎用。问题原因：盒子模型1、盒子模型：在页面放2个input，一个text文本框，一个button按钮(设置宽高，无任何其他样...
input输入框大小设置_前端需要知道的冷知识2 input | margin重叠 | 大小写 | 盒模型...
weixin_39626181的博客
11-25 4243
注：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。接上篇文章，我们继续来讲一些平常可能会用到但是又比较冷门的知识。一 input提示语句我们在使用input输入框和textarea输入框时，有时候需要给用户一些提示，比如这个输入框应该填写的内容，有人说提前预设“value”不就可以了吗？如果不是太抠细节，用...
如何让input框在用户输入后，文字居中显示
ggq53219的博客
05-31 3759
使用 text-align: center;（通常不生效）
<view class="qs" style="display: flex;height: 2px;" > <view style="height: 50px;width: 50px;margin-top: 4%;"> <span style="color: red;">*</span> <text style="align-items: center;justify-content: center;">01.</text> </view> <view> <block v-for="(item, i) in processedText" :key="i"> <text v-if="item.type === 'text'" style="font-size: 15px;line-height: 5px;">{{ item.content }}</text> <input v-else class="blank-input" v-model="answers[item.index]" :placeholder="item.placeholder" style="width: 120rpx; border-bottom: 2rpx solid #666; margin: 0 10rpx;" /> </block> <span style="color: red;margin-left: 10px;">(5分)</span> </view> </view>我想让这几个元素横向对其
最新发布
03-22
<think>好的，我现在要解决的问题是让用户提供的Vue.js和UniApp代码中的几个元素横向对齐。首先，我需要仔细阅读用户提供的代码，理解各个元素的结构和现有的样式，然后找出导致不对齐的原因，并提出解决方案。 首先，用户提供的代码结构如下： 外层是一个`<view class="qs">`，设置了`display: flex; height: 2px;`。里面有两个子`<view>`元素。第一个子view包含了一个带有红色星号的`<span>`和一个显示“01.”的`<text>`。第二个子view内部有一个循环生成的block，包含文本或输入框，最后还有一个红色分数的`<span>`。 用户希望这几个元素横向对齐，但目前可能存在的问题是这些元素没有在同一水平线上对齐，可能出现上下错位的情况。需要检查各个元素的布局方式和样式属性，特别是Flexbox相关的属性，因为外层容器已经使用了`display: flex`，但可能配置不正确。 接下来，我需要分析现有的样式： 1. 外层容器`.qs`的样式是`display: flex; height: 2px;`。这里设置的高度非常小，只有2px，可能会影响内部元素的布局，特别是当子元素高度较大时，可能导致裁剪或布局错误。此外，Flex容器默认的排列方向是row（横向），所以子元素应该横向排列，但需要检查是否还有其他因素影响对齐。 2. 第一个子view的样式是`height: 50px; width: 50px; margin-top: 4%;`。这里使用了百分比margin-top，可能会相对于父容器的高度进行计算，而父容器高度只有2px，4%就是0.08px，几乎不起作用。此外，该子view的宽度和高度固定，内部包含的文本和星号可能需要进一步调整对齐方式。 3. 第二个子view内部包含block循环生成的文本和输入框，以及一个分数span。这里文本的样式有`font-size: 15px; line-height: 5px;`，line-height过小可能导致文本垂直方向布局异常，影响与其他元素的对齐。输入框的样式有固定宽度、边框和下边距，可能也需要调整垂直对齐方式。 可能的对齐问题点： - 外层容器的高度设置过小，可能导致子元素被压缩或溢出。 - 第一个子view的margin-top使用百分比，在父容器高度很小时可能无效。 - 内部元素（如text、input、span）的垂直对齐方式未统一，可能使用默认的baseline对齐，导致错位。 - Flex容器的align-items属性未设置，默认是stretch，可能导致子元素高度被拉伸，但父容器高度限制为2px，这可能会引起问题。 解决方案步骤： 1. **调整外层容器的高度**：将外层`.qs`的`height: 2px;`改为`min-height: 50px;`或适当的高度，确保能容纳内部子元素，避免挤压。或者直接移除height属性，让高度由内容撑开。 2. **修正Flex容器的对齐方式**：在外层容器添加`align-items: center;`，使子元素在交叉轴（默认是垂直轴）上居中对齐。这样两个子view会在垂直方向上居中对齐。 3. **检查并调整子view的样式**： - 第一个子view的`margin-top: 4%;`改为使用固定单位（如px或rpx），或者移除，因为父容器现在可能有足够的高度，不需要额外的margin。 - 确保第一个子view内部的元素（span和text）使用Flexbox或垂直居中，使“01.”和星号正确对齐。 4. **统一内部元素的垂直对齐**：对于文本和输入框，设置`vertical-align: middle;`或在它们的容器中使用Flexbox属性，确保它们在行内对齐。 5. **调整line-height**：文本的line-height过小（5px）可能导致文本垂直方向挤压，调整为与字体大小相匹配的值，例如`line-height: 15px;`（与font-size相同）或稍大，确保文本正常显示。 6. **处理输入框的基线对齐**：输入框默认是inline-block元素，可能会基于基线对齐，导致与旁边的文本不对齐。可以设置`vertical-align: middle;`或调整父容器的align-items属性。 具体修改步骤： 1. 修改外层容器的样式： ```html <view class="qs" style="display: flex; align-items: center; min-height: 50px;"> ``` 这里添加了`align-items: center;`使子元素垂直居中，并设置`min-height`确保容器足够高。 2. 调整第一个子view的样式，移除margin-top，并设置内部元素的布局： ```html <view style="height: 50px; width: 50px; display: flex; align-items: center; justify-content: center;"> <span style="color: red;">*</span> <text style="align-items: center; justify-content: center;">01.</text> </view> ``` 这里将第一个子view也设置为Flex容器，内部元素水平居中，并垂直居中，确保星号和题号正确对齐。 3. 调整第二个子view的内部元素样式： ```html <block v-for="(item, i) in processedText" :key="i"> <text v-if="item.type === 'text'" style="font-size: 15px; line-height: 15px; vertical-align: middle;">{{ item.content }}</text> <input v-else class="blank-input" v-model="answers[item.index]" :placeholder="item.placeholder" style="width: 120rpx; border-bottom: 2rpx solid #666; margin: 0 10rpx; vertical-align: middle;" /> </block> ``` 这里调整了text的line-height为15px，与font-size一致，并添加了`vertical-align: middle;`，输入框也添加了同样的属性，确保它们在行内垂直居中对齐。 4. 处理分数span的样式，可能需要调整margin或使用Flex对齐： ```html <span style="color: red; margin-left: 10px; vertical-align: middle;">(5分)</span> ``` 同样添加`vertical-align: middle;`确保与前面的元素对齐。 可能遇到的问题： - 不同平台（如H5和小程序）对Flex布局的支持差异，需要测试多端表现。 - 单位不一致，例如同时使用px和rpx，可能导致布局错位，建议统一使用rpx。 - 输入框的默认样式（如padding、border）可能影响布局，需要检查是否需要重置。 验证方法： - 在浏览器或模拟器中查看元素布局，使用开发者工具检查各个元素的盒模型，确认对齐情况。 - 测试不同平台下的显示效果，确保一致性。</think>在UniApp中实现横向对齐的优化方案如下（针对你提供的代码结构）： 一、核心问题定位 1. 父容器高度异常：父容器高度仅2px导致布局挤压 2. 未正确使用Flex布局：flex容器参数配置不完整 3. 元素基线对齐差异：文字与输入框默认基线对齐方式不同 二、分步优化方案 1. 修复父容器样式 ```html <!-- 修改前 --> <view class="qs" style="display: flex;height: 2px;" > <!-- 修改后 --> <view class="qs" style="display: flex; align-items: center; min-height: 60px;"> ``` * 调整说明： - 去除异常height限制 - 添加`min-height`保证可视高度 - 增加`align-items: center`垂直居中 2. 调整左侧序号容器 ```html <!-- 修改前 --> <view style="height: 50px;width: 50px;margin-top: 4%;"> <!-- 修改后 --> <view style="display: flex; align-items: center; width: 80rpx; margin-right: 20rpx;"> ``` * 调整说明： - 改为flex布局容器 - 添加对齐参数 - 使用rpx单位更适配多端 - 用margin-right替代百分比margin 3. 统一文本基线对齐 ```html <!-- 文本部分修改 --> <text style="font-size: 15px; line-height: 1.4; vertical-align: middle;">{{ item.content }}</text> <!-- 输入框增加样式 --> <input ... style="vertical-align: middle; /* 新增 */ line-height: normal; /* 新增 */ padding: 6rpx 0 /* 新增 */"> ``` 4. 最终完整代码示例 ```html <view class="qs" style="display: flex; align-items: center; min-height: 60px;"> <view style="display: flex; align-items: center; width: 80rpx; margin-right: 20rpx;"> <span style="color: red; margin-right: 4rpx;">*</span> <text style="font-size: 14px;">01.</text> </view> <view style="flex:1; display: flex; align-items: center; flex-wrap: wrap;"> <block v-for="(item, i) in processedText" :key="i"> <text v-if="item.type === 'text'" style="font-size: 15px; line-height: 1.4; vertical-align: middle;"> {{ item.content }} </text> <input v-else class="blank-input" v-model="answers[item.index]" :placeholder="item.placeholder" style="width: 120rpx; border-bottom: 2rpx solid #666; margin: 0 10rpx; vertical-align: middle; line-height: normal; padding: 6rpx 0;" /> </block> <span style="color: red; margin-left: 10px; vertical-align: middle;">(5分)</span> </view> </view> ``` 三、关键调整点说明 1. 垂直对齐方案： - 所有元素添加`vertical-align: middle` - 输入框添加`line-height: normal`消除默认行高影响 - 使用统一的flex容器对齐策略 2. 布局优化： ```mermaid graph TD A[父容器] --> B[左侧序号容器] A --> C[内容区容器] C --> D[文本区块] C --> E[输入框] C --> F[分数显示] style A fill:#f9f,stroke:#333 style B fill:#ccf,stroke:#333 style C fill:#cfc,stroke:#333 ``` 3. 多平台适配建议： - 优先使用rpx单位 - 对H5和小程序做差异处理： ```css /* 小程序输入框高度修正 */ /* #ifdef MP-WEIXIN */ .blank-input { min-height: 40rpx; } /* #endif */ ``` 四、常见问题排查 1. 元素错位情况检查： - 检查父容器是否设置`align-items: center` - 确认所有子元素都设置`vertical-align` - 排查是否混用px/rpx单位 2. 输入框高度异常处理： ```javascript // 在组件mounted生命周期添加调试代码 mounted() { const query = uni.createSelectorQuery().in(this) query.select('.blank-input').boundingClientRect(data => { console.log('输入框尺寸:', data) }).exec() } ``` 通过上述调整，可实现： 1. 所有元素精确横向对齐 2. 跨平台显示一致性 3. 动态内容自适应排列 建议在真机调试时使用WXS响应式尺寸方案优化用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值