css中如何让div中的文本框居中

也许这个问题很简单,我承认之前确实没怎么研究过css,现在老板让我画这个界面(擦~),我希望达到的效果和google的首页一样,因为我一个div中有三个元素,我希望让文本... 也许这个问题很简单,我承认之前确实没怎么研究过css,现在老板让我画这个界面(擦~),我希望达到的效果和google的首页一样,因为我一个div中有三个元素,我希望让文本框(text)居中,在css中应如何做?
<div class="middle">
<input type="text" id="txt" name="txt" disabled="disabaled" />
<label for="file">选择文件</label>
<input type="file" id="file" name="file" onchange="txt.value=this.value" class="file"/>
</div>
谢谢~
展开
 我来答
很多游戏
高粉答主

2019-11-27 · 游戏精通者,攻略技能点满
很多游戏
采纳数:91 获赞数:387009

向TA提问 私信TA
展开全部

1、打开Dreamweaver cc  2014软件,选择建立html界面,里面自动生成一些必要代码的代码格式,节省时间。

2、在body标签内输入:<div class="one">最喜欢玩游戏</div>;这是图形框的代码,以及要居中的文本内容。

3、在body标签前面位置,输入:

<style>

.one{

width:400px; height:220px; border:red solid 1px;

}

</style>

5、输入完保存,摁F12键弹出页面,可以看到图框中的文字没有居中。

6、要想文本文字居中,先加上些代码内容。

7、然后增加内容后保存,恩F12键,跳转到页面看效果,即可看到文本居中。

0800308114
推荐于2017-09-25 · TA获得超过975个赞
知道小有建树答主
回答量:1162
采纳率:100%
帮助的人:1033万
展开全部

在样式里面给middle写个宽度,然后写个margin:0 auto;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.middle{margin:0 auto;width:600px;}
</style>
</head>

<body>
    <div class="middle">
        <input type="text" id="txt" name="txt" disabled="disabaled" />
        <label for="file">选择文件</label> 
        <input type="file" id="file" name="file" onchange="txt.value=this.value" class="file"/>
    </div>
</body>
</html>
更多追问追答
追问
谢谢啊,这样确实是可以居中显示了,虽然没明白什么原理,但是那个file文件换行了,能不能让他们在一行中显示,然后只是text居中呢?而不是这个整体
追答
我这里没有换行啊,不是特别明白你要表达的意思,你可以画个图看看么
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
du瓶邪
推荐于2017-10-12 · TA获得超过2.4万个赞
知道大有可为答主
回答量:1.7万
采纳率:100%
帮助的人:2954万
展开全部
可以用增高行距的办法变通实现垂直居中,完整代码如下:
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id="center"><p>test content</p></div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2014-04-02
展开全部
文字居中
text-align:center;

块居中

margin:0 auto;
width:
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2014-04-02
展开全部
直接加一个 text-align:center; 应该可以的
追问
#txt{text-align:center;}这样是吧??这样不行,我再加上vertical-align:middle;这样也不对,虽然我也没明白这两个到底有什么不同,,,
追答
#调用需要用 id
.调用用class
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式