option和select中文本如何居中对齐

相关代码：

问题描述：问题如题目，尝试了很多办法，也百度了，好像没啥作用，问问老师有啥好的方法吗

相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>select选择器</title>
		<style type="text/css">
			select{
				text-align: center;
			}
			option{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<select >
			<option>请选择选项</option>
			<option>+</option>
			<option>橘子</option>
			<option>-</option>
		</select>
	</body>
</html>

尝试过的解决方式：

select{

width: auto;

padding: 0 1%; //左右一定要设置

margin: 0;

}

option{

text-align:center;

}

但这个没有实现想要的效果，这个仅仅是实现了select框的对齐，option中的文字还是没有居中

王文辉 2021-02-05

源自：vue基础入门 3-23 自由编程

收起

2回答

好帮手慕夭夭 2021-02-07 16:25:19

同学你好，只能从视觉效果上让它看上去居中。如果同学想要绝对的居中，那么是没有这样的方式的，且实际开发中不会有这样的需求，这种方式了解一下即可。

祝学习愉快~

收起回答

好帮手慕夭夭 2021-02-05 16:54:23

同学你好，一般是不需要给下拉菜单select设置居中效果的，不过有一个特殊的小技巧可以让它居中，参考如下了解一下哦：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>select选择器</title>
<style type="text/css">
select {
width: auto;
padding: 0 2%;
margin: 0;
}

option {
text-align: center;
}
</style>
</head>

<body>
<select>
<option>请选择选项</option>
<option>+</option>
<option>橘子</option>
<option>-</option>
</select>
</body>

</html>