如果使用填充，如何在具有HTML/CSS的窗体中将文本框居中？
在具有HTML/CSS的窗体中，可以使用以下方法将文本框居中：
- 使用CSS的flex布局：
- 在父容器上设置
display: flex;，将其子元素水平居中。 - 在父容器上设置
align-items: center;，将其子元素垂直居中。 - 示例代码：<div style="display: flex; align-items: center; justify-content: center;"> <input type="text"> </div>
- 在父容器上设置
- 使用CSS的绝对定位和transform属性：
- 将父容器设置为相对定位(
position: relative;)，以便子元素相对于其进行定位。 - 将文本框设置为绝对定位(
position: absolute;)，并使用left: 50%;和top: 50%;将其定位到父容器的中心位置。 - 使用
transform: translate(-50%, -50%);将文本框向左和向上移动自身宽度和高度的一半，以使其完全居中。 - 示例代码：<div style="position: relative;"> <input type="text" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"> </div>
- 将父容器设置为相对定位(
- 使用CSS的表格布局：
- 将父容器设置为
display: table;，将其子元素设置为display: table-cell;，并使用text-align: center;和vertical-align: middle;将其水平和垂直居中。 - 示例代码：<div style="display: table; width: 100%; height: 100%;"> <div style="display: table-cell; text-align: center; vertical-align: middle;"> <input type="text"> </div> </div>
- 将父容器设置为
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
相关·内容
3回答
将显示设置为表格单元格的内容垂直居中
html、css、html-table、flexbox
我有以下标记，其中包含一个类名为one-fifth-flex的div。
这有以下规则：
display: table-cell;
text-align: center;
vertical-align: middle;
然而，内容似乎不是垂直对齐的，而是移动到顶部。有没有可能像图中那样居中？
提前谢谢。
.button-bottom-50.btn-mchoice {
display: flex;
align-items: center;
justify-content: center;
height: 50%;
width: 100%;
backgro
浏览 0提问于2017-10-10得票数 0
1回答
为什么不调整-content居中使用display:flex的React组件？
javascript、html、css、reactjs、flexbox
大家好，我正在做一个React项目，我在NPM上找到了一个滑动窗格库，我正在为我的使用定制它。我想要水平居中窗格，所以我尝试添加"justify-content: center“到flexbox，但是我的组件仍然不居中。我也尝试了"align-items: center“，但这只会将面板内的所有内容移动到中心，而不是面板本身。我尝试了"margin: 0 auto”，但这也不起作用，但“margin left: 50px”确实可以移动它。有人知道是什么阻止了它的居中吗？下面是CSS和.js代码：
/*custom version of css file fou
浏览 2提问于2020-06-22得票数 1
1回答
如何相对于柔性箱祖父母垂直地将div居中？
html、css、flexbox、centering
给定一个带有display .wrapper的div (在下面运行并查看代码段)和一个深度嵌套的div .text-container，我如何使深度嵌套div相对于.wrapper而不是相对于它的父.variable-height？
在下面的片段中，有两个高度相等的列，我希望文本(放在每个列内的可变高度div中)处于相同的水平。我已经将可变高度div的显示设置为flexbox，因此从逻辑上讲，文本是居中的，相对于它而不是祖父母.wrapper，这不是我想要的。
我想出的唯一解决方案是在.wrapper和.text-container上设置.wrapper
position: absolute;
浏览 1提问于2016-01-20得票数 2
回答已采纳
1回答
divs之间垂直线的Css
html、css
我使用vue (html语法)为注释链创建div，基本上是在多个评论存在的地方，并以一种方式在它们自己的容器中将它们链接在一起。 我目前有一个很好的小布局，我已经在每个评论的左边创建了一个划线的圆圈，这是一个很好的步骤，但我想要做的是找到一种方法来创建一条实线或虚线，在圆形工件之间垂直移动，以完成将它们链接在一起的想法。 这是我所拥有的和一个小涂鸦来代表我想要的东西： ? 在下面发布我的代码。实现这一点的好方法是什么(假设我不担心移动响应，因为我可能会在移动设备上完全取消链)？ <div class="commentsChainContainer">
浏览 15提问于2020-04-04得票数 2
回答已采纳
2回答
垂直对中的flex项目在Chrome中工作，但Firefox不起作用
html、css、firefox、flexbox
我编写了这段简单的代码，以使我的内部div对齐
<div style="display: flex;align-items: center;width: 100%;height: 600px;background-color: gray;">
<div style="background-color: white;width: 100px;height: 300px;position: absolute;"></div>
</div>
而且它在铬中工作很好。但在火狐中却不是。
在Firefox中，内部d
浏览 6提问于2016-12-07得票数 1
回答已采纳
1回答
在flex父级的子级中使用位置绝对
html、css、flexbox、position
我正在使用flex的属性和位置，我发现了一些东西。 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.mainContainer {
margin: 10vh auto;
width: 80vh;
height: 80vh;
/* display: flex; */
justify-content: center;
/* align-items: center; */
border: 1px solid red;
/* positi
浏览 160提问于2021-10-20得票数 1
25回答
如何使元素水平地和垂直地对中
html、css、layout、alignment、centering
我试图把我的标签内容垂直中心，但是当我添加CSS样式display:inline-flex时，水平文本对齐消失了。
如何使两个文本对齐x和y为我的每个选项卡？
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
浏览 29提问于2013-10-19得票数 520
回答已采纳
2回答
如何使自定义对话框中的文本垂直居中
html、css
我需要你的帮助,
我将如何修改下面的HTML或CSS标记，使我的自定义对话框中的文本垂直在空格中居中。以下是问题的快照：
以及预期结果：
下面是CSS：
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding
浏览 4提问于2015-04-25得票数 0
回答已采纳
3回答
CSS翻译铬中的错误工作
html、css
我正试图用translateY将一个子DIV定位在父DIV的中间。但是，如果子DIV不是位置:绝对值，或者没有高度属性的父DIV，那么它就会耗尽父DIV。
HTML
<div class="parent">
<div class="img-wrap"></div>'
<div class="child"></div>
</div>
CSS
.parent{
/*
height:190px;
*/
background-c
浏览 5提问于2016-01-21得票数 1
回答已采纳
1回答
如何将div堆叠在一起？绝对位置不起作用
html、css、reactjs
所以我使用了flexbox来创建网格，不幸的是，我在如何让div堆栈堆叠在一起的问题上遇到了一些麻烦。这是我隐藏overflow:auto并添加相对于carddiv的位置时的样子。我相信div堆叠在顶部，但它们看起来不是正确的方式。 它看起来是这样的： 图像链接https://imgur.com/a/1KsJDh7 我希望它看起来是这样的： 除了positon:absolute会让一切消失。我是css/html的新手，所以我不太确定我做错了什么。 https://imgur.com/a/mrLsTdX App.css * {
/*overflow:auto*/
}
.App {
浏览 18提问于2019-02-06得票数 0
1回答
如何消除css循环的溢出--“溢出:隐藏”无法工作
javascript、html、css、reactjs、styled-components
我用css制作了两个圆圈，它们在屏幕上半显示，所以它们是半圆。在应用程序的所有其他页面上，没有溢出，因为我使用溢出:隐藏或溢出-x:隐藏。然而，它不适用于此设计。
我是否需要重新设计和摆脱这个圈子，还是有一个解决办法？
链接到代码框。
代码也在下面
备注：
作为参考，这是正在开发的移动首先，所以把它放在移动视图，作为尚未设计的桌面或平板电脑。
不知道为什么，但是当使用带代码沙箱的dev工具时，它在本地主机上的外观实际上不能正常工作，我唯一的问题是溢出-x-忽略页眉或页脚的定位问题以及出现的内容。
FAQPage.js
import React from 'react&#
浏览 1提问于2021-08-02得票数 0
1回答
“柔性版”在移动设备上与桌面上的显示方式不同
html、ios、css、flexbox
问题
我有一个网站，工作和预览良好的桌面设备的反应，但在移动上，它似乎不正确。
它包括一个完整页面的flex容器，其中包含两个共享水平空间的元素。
在平板电脑和移动设备上，flex容器被设置为column，这样它就可以垂直显示，但是当访问移动设备上的站点时，元素会相互堆叠在一起，。
代码
index.php
<div class="flex">
<!-- Header -->
<div class="hero">
<div class="header">
浏览 0提问于2016-02-18得票数 0
回答已采纳
3回答
显示Flex项目对齐中心
html、css、flexbox
我正试图使它，所以第二部分或第一部分将对齐中心与顶部。
我不明白的是，与具有显示块的项目之间的关系。
第一个问题:与第二节中的居中文字相比，是否有一种使用flex的方法，使顶部的徽标看起来不像“偏离”中心？
指向钢笔的链接：
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="sec
浏览 1提问于2021-08-31得票数 4
2回答
如何在CSS中垂直定位DIV元素
html、css、flexbox、alignment
我在CSS中的内容定位有问题。我想把我的内容和垂直定位。我试过使用柔性箱，但没有用。我知道什么是柔性盒，它的特性，但它对我不起作用。这是CSS和HTML代码。
HTML：
<div class="main-div">
<div class="container-1">
<h2>What is Your Age In Days?</h2>
<div class="flex-box-container-1">
<
浏览 4提问于2021-12-12得票数 0
1回答
为什么'justify-content: space-between‘不会让导航栏移到右边？
html、css、flexbox
我对超文本标记语言和css很陌生，但似乎不能理解为什么justify-content不能正常工作。内联代码块似乎确保了.navbar_wrapper没有100%的宽度，<a>链接元素也没有max-width，所以我不确定为什么它们根本没有间隔，或者没有受到header flex容器的影响。 @import url('https"//fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
p
浏览 58提问于2021-02-01得票数 0
回答已采纳
1回答
按比例缩放Img以填充整个容器，而无需CSS覆盖(javascript/React)
javascript、css、reactjs
图像需要填充容器的整个宽度和高度，但保持居中并与其原始大小成比例。我希望它是动态的，所以图像可以填满任何尺寸的屏幕。 示例：https://codesandbox.io/s/nice-fog-u7dud?file=/src/App.js:0-685 请帮帮我！ import "./styles.css";
import bgImage from "./bg.jpg";
const appContainerStyle = {
height: "100vh",
width: "100vw"
};
const image
浏览 32提问于2021-01-24得票数 0
回答已采纳
3回答
当小于浏览器高度时垂直中心div (引导带)
html、css、bootstrap-4
我使用CSS引导程序4，在容器内每行有多列。根据屏幕大小，这些列可以相互叠加，使容器更高，有时超出了屏幕上显示的范围，需要滚动。我似乎想不出办法来满足这两种条件：
如果容器比浏览器窗口的高度短，如果容器比浏览器窗口高，则在屏幕中央的中居中，不要对容器进行中心(这样它就不会离开屏幕)。
下面我有代码将容器居中，但是当文本行数比屏幕高时，它就会因为.centered而关闭屏幕，不能像普通页面那样滚动。
以下是我的HTML：
<div class="container centered" style="width: 100%">
<div c
浏览 4提问于2019-12-01得票数 3
回答已采纳
2回答
HTML CSS Carousel主页
html、css
嗨，我是相对较新的Html和css，最近已经开始制作和设计我自己的网站。到目前为止，我所做的是有4张图片，这将是我的一部分，在网站上的旋转木马，并使他们成为宽度和高度的任何屏幕上。我有一个覆盖在旋转木马上，因为我想让网站的内容，即下一步/prev按钮，旋转木马点和导航栏更引人注目。旋转木马将允许用户导航到网站上的另一个页面。我还需要使用旋转木马点来显示给用户看有多少幻灯片，但到目前为止，我只想让这个点显示在屏幕的顶部，这不是我想要的，因为我最终想把导航栏放在那里。我试着把它的位置设置为绝对，但它只显示一个点，当应该有四个。如果有人能帮我解释我做错了什么，那就太棒了，还可以指出我在旋转木马上添加
浏览 0提问于2018-02-01得票数 0
回答已采纳
1回答
移动设备上的响应卡
css、reactjs
你好，我有3张卡片，我使用翻译将它们大小的50%移动到div的顶部 但我不能让它在移动设备上响应，我的文本也会在移动设备上从卡中出来： 📷 由于某些原因，屏幕宽度已过 代码： export default function App() {
return (
<>
<div style={{ background: "red", height: "300px" }} />
<div
style={{
display: "flex",
浏览 21提问于2020-01-27得票数 0
回答已采纳
2回答
如何在Safari中将flex容器的绝对位置的子容器居中？
html、css、safari、flexbox、mobile-safari
我有一个既包含图像又包含一些文本的容器。我想要的文本是垂直和水平居中的图像。
似乎最简单、最具前瞻性的方法是使用Flexbox和文本的绝对定位：
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.text {
position: absolute;
}
<div class='container'>
<div class='text'>
This should
浏览 5提问于2017-06-08得票数 9
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
