JS垂直居中，大大帮忙

bjxjzh 2009-05-17 04:52:27

一个li，里头一个span，li高度可变
让span在li中垂直居中

用JS。

...全文

255 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

redhat2 2009-05-18

打赏
举报

关注

.

人力资源

还是空空 2009-05-17

打赏
举报

你设置它的vagin属性就可以了，
document.getElementById("名字").vagin = 'modden';

bjxjzh 2009-05-17

打赏
举报

谢谢你的回复，但我不考虑

1你的代码高度固定
2可变高度css方法网上也有几种，基本都试过，国外的都试过，但针对我的代码还需要添加额外的东西，经测试带来很多问题，需要改很多选择符，并且有的无法hack。

[Quote=引用 1 楼 zswang 的回复:]
HTML code<html>
<body>
<div>
<li style="height:40px;display:inline;">
<ul style="padding:0;margin:0;background-color:Red;">
<span style="background-color:Yellow;line-height:40px;">zswang 路过</span>
</ul>
</li>
</div>
<div>
<li style="height:60px;display:inline;">
<ul style="padding:0;margin:0;background-color:Blue;">
<span style="background-color:Yellow;l…
[/Quote]

bjxjzh 2009-05-17

打赏
举报

我是个大菜，但我感觉你的代码是针对li的。。
我是想：span 在可变高度的li中垂直居中，也不用什么东西触发函数。

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<div style="float:left;padding-right:5px;"><?php echo get_avatar( $comment, 44 ); ?></div>
<span><?php echo $count_pings; $count_pings++; ?></span>
<cite><?php comment_author_link() ?><br />在 <?php comment_date('y-m-d') ?> <?php comment_time() ?> 说：</cite>
<div style="margin:2px 0 5px;word-break:break-all;width:468px;" ><?php comment_text() ?></div><?php if(function_exists('mailtocommenter_button')) mailtocommenter_button();?>

</li>

[Quote=引用 2 楼 jxplus 的回复:]
下面是我现写的，我试过，可以：

HTML code
<body>

<ul>
<li id="li1">
aaa<span>sss</span>
</li>
</ul>
<input type="button" value="垂直居中" onclick="vmiddle()"/>

<script type="text/javascript">
function vmiddle(){
document.getElementById("li1").style.verticalAlign="middle";
}
</script>

</body>
[/Quote]

jxplus 2009-05-17

打赏
举报

下面是我现写的，我试过，可以：



<body>



<ul>

	<li id="li1">

		aaa<span>sss</span>

	</li>

</ul>

<input type="button" value="垂直居中" onclick="vmiddle()"/>



<script type="text/javascript">

   function vmiddle(){

   	document.getElementById("li1").style.verticalAlign="middle";

   }

</script>



</body>

王集鹄 2009-05-17

打赏
举报

<html>

<body>

<div>

<li style="height:40px;display:inline;">

	<ul style="padding:0;margin:0;background-color:Red;">

		<span style="background-color:Yellow;line-height:40px;">zswang 路过</span>

	</ul>

</li>

</div>

<div>

<li style="height:60px;display:inline;">

	<ul style="padding:0;margin:0;background-color:Blue;">

		<span style="background-color:Yellow;line-height:60px;">zswang 路过1</span>

	</ul>

	<ul style="padding:0;margin:0;background-color:Green;">

		<span style="background-color:Yellow;line-height:60px;">zswang 路过2</span>

	</ul>

</li>

</div>

</body>

</html>