html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换

在网页开发中遇到这样一个问题，在使用select的时候，想让里面的文字水平居中。首先想到的是text-align:center;但是发现在Chrome浏览器下不兼容，需要使用到text-align-last:center;就可以了。代码如下：

select{

	width: 400px;

	text-align:center;

	text-align-last:center;/*兼容chrome*/

}

</style>

<select>

	<option value="1">No-1</option>

	<option value="2">No-2-我的内容很多哦。哈哈</option>

</select>

设计网站大全https://www.wode007.com/favorites/sjdh

但是上面代码在Safari上没起作用；如果不考虑Safari的兼容上面代码就可以了。如果要兼容，我们可以在用一个div包裹select,在该div内添加一个span元素，用js去绑定span里的值和select的值，让span元素居中，隐藏掉select就可以了。代码如下：

css:

<style>

#box{

     width: 400px;

     border: 1px solid #ddd;

     text-align: center;

     position: relative;

}

select{

    position: absolute;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    opacity: 0;

}

</style>

html:

<div id="box">

	<span id="show">No-1</span>

	<select>

		<option value="1">No-1</option>

		<option value="2">No-2-我的内容很多哦。哈哈</option>

	</select>

</div>

js:

<script>

window.onload=function(){

	var show=document.getElementById('show');

	var sel=document.getElementsByTagName('select')[0];

	sel.onchange=function(){

		var index=sel.selectedIndex; //序号，取当前选中选项的序号

		show.innerText=sel.options[index].text;

	}

}

</script>

这样就可以简单模拟实现select居中的效果了，但是上面代码并不完善，例如没有下拉框的箭头，这个大家可以自己添加上去。在js上面如果使用了框架，如vue,angularjs等，就可以很简单的实现数据的双向绑定，实现就更简洁了。

延伸：如何让option的文字居中呢？

无论怎么尝试，都没发现能完美解决option中的值居中的方法。大部分需要这样的需求的同学，可能也是加空格来实现的，或者不使用select,利用div,js等完全模拟select下拉框效果。当然说实话：select的option居中效果很难看，你可以想象option中的值长度不一，居中还不如靠左对齐呐。

巴特西

html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换

延伸：如何让option的文字居中呢？

最新文章

热门文章