如何只修改CSS让select垂直居中

jhrxx 2011-12-14 12:13:09



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

		"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

	<title></title>

	<style type="text/css">

		div{

			line-height: 50px;

			border: 1px solid #333;

			height: 50px;

		}

	</style>

</head>

<body>

	<div>

		<select>

			<option>1234</option>

		</select>

	</div>

</body>

</html>

...全文

5492 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

MuBeiBei 2011-12-14

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <style type="text/css">

        div{

            display:table-cell;

            border: 1px solid #333;

            height: 50px;

            line-height:50px;

            vertical-align:middle;

            position:relative;

        }

        p{

            +position:absolute;

            top:50%;

            

        }

        select{

            +position:relative;

            top:-50%;

        }

    </style>

</head>

<body>

    <div>

        <p>

            <select>

                <option>1234</option>

            </select>

        </p>

    </div>

</body>

</html>

最好是外面再套一个标签。

这样就可以完美垂直居中了

三石-gary 2011-12-14

打赏
举报

4楼的答案是你想要的吗？

MuBeiBei 2011-12-14

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <style type="text/css">

        div{

            line-height: 50px;

            border: 1px solid #333;

            height: 50px;

            position:relative;

        }

        select{

            position:absolute;

            top:30%;

        }

    </style>

</head>

<body>

    <div>

        <select>

            <option>1234</option>

        </select>

    </div>

</body>

</html>

jhrxx 2011-12-14

打赏
举报

[Quote=引用 1 楼 yhtapmys 的回复:]

div {
border: 1px solid #333333;
height: 50px;
line-height: 50px;
text-align: center;}
[/Quote]
垂直居中不是水平居中

三石-gary 2011-12-14

打赏
举报

[Quote=引用 1 楼 yhtapmys 的回复:]

div {
border: 1px solid #333333;
height: 50px;
line-height: 50px;
text-align: center;}
[/Quote]
+1

yhtapmys 2011-12-14

打赏
举报

div {
border: 1px solid #333333;
height: 50px;
line-height: 50px;
text-align: center;}

CalvinR 2011-12-14

打赏
举报

如果改样式的话定一下那个<SELECT>的位置应该可以那你要算好页面的各个位置了

CalvinR 2011-12-14

打赏
举报

加<CENTER></CENTER>标签不可以吗？

yhtapmys 2011-12-14

打赏
举报

IE8/FF3.6通过



        div

        {

            line-height: 50px;

            border: 1px solid #333;

            height: 50px;

            text-align: center;/*DIV里元素居中*/

        }

        select

        {

            position:relative;

            top:50%;/*该元素顶部与父元素顶距离，若要更佳垂直居中效果，需要考虑元素本身高度，如在此例30%更好。*/

        }