CSS整理的答疑

最新推荐文章于 2026-03-04 14:32:54 发布

原创最新推荐文章于 2026-03-04 14:32:54 发布 · 437 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

当前文章被收录于：

CSS

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

1.position:relavie div元素，相对定位，如何居中

.jmx-file-box{
position: relative;
width: 340px;
left: 50%;
margin-left: -170px;  /*此处的负值是宽度的一半*/
}
<div class="jmx-file-box"></div>

2.普通元素如何居中（加margin:0 auto)

<table border="1" style="margin:0 auto;">
</table>

文字如何居中，（此时body中的文字都居中）

body{text-align:center;}

3.opacity: 0属性控制不透明级别，0是完全被覆盖，透明

.jmxfile{opacity: 0}
<input type="file class="jmxfile" />

4.<input type="file" />控件难看

<style type="text/css">
/*jmx file 样式*/
input{vertical-align:middle; margin:0; padding:0}
.jmx-file-box{position:relative;width:340px;left:50%;margin-left:-170px;}/*position:relative;*/
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.jmxfile{text-align:center; position:absolute;top:0;right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }/*position:absolute;*/
</style>
<div class="jmx-file-box">
		  	<form enctype="multipart/form-data">
				<input type='text' name='textfield' id='textfield' class='txt' />  
				<input type='button' class='btn' value='浏览...' /> 
				<input type="file" name="jmxfile" class="jmxfile" id=jmxfile size="28" onchange="document.getElementById('textfield').value=this.value" />
				<input type="button" name="submit" class="btn" value="upload jmx" onclick="ajaxJmxUpload()"/> 
		  	</form>
  </div>

结果如下图：