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>
谢谢～ 展开
<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>
谢谢～ 展开
5个回答
展开全部
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键，跳转到页面看效果，即可看到文本居中。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在样式里面给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居中呢？而不是这个整体
追答
我这里没有换行啊，不是特别明白你要表达的意思，你可以画个图看看么
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以用增高行距的办法变通实现垂直居中，完整代码如下：
<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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
直接加一个 text-align:center; 应该可以的
追问
#txt{text-align:center;}这样是吧？？这样不行，我再加上vertical-align:middle;这样也不对，虽然我也没明白这两个到底有什么不同，，，
追答
#调用需要用 id
.调用用class
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
