select让文字居中

最新推荐文章于 2023-05-12 13:28:35 发布

iteye_4945

最新推荐文章于 2023-05-12 13:28:35 发布

阅读量919

点赞数

分类专栏： html5 文章标签： html5 select center

本文链接：https://blog.csdn.net/iteye_4945/article/details/82550244

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做手机项目中遇到想让select居中的问题，原以为是无解的。

看Jquerymobile的时候发现它的select可以居中，于是如下：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

.ui-select {
	text-align: center;
	/* 加border只是为了看到边框*/
	border:solid 1px;
}
.ui-select select {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 3em;
	opacity: 0;
}

</style>
</head>
<body>
	<div class="ui-select">
		<span>The 1st Option</span>
		<select>
			<option value="1">The 1st Option</option>
			<option value="2">The 2nd Option</option>
			<option value="3">The 3rd Option</option>
			<option value="4">The 4th Option</option>
		</select>
	</div>
</body>
</html>

基本实现思路就是隐藏掉select，实际点击到的是span。

代码写的很神奇是不是？