[英]CSS wont align text in DIV
我是学习jquery并创建自己的网站的新手。 这是我的小提琴JSFIDDLE 。 当您将鼠标悬停在新的div上时会显示一些文字。 但是文本不在该div中。 我想要新div中的文字。 我不知道为什么会这样。 我知道这是一个愚蠢的问题,但是我花了一个多小时才把它弄对了。
编码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="example.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
<h2 id='name'> Karan Shah </h2>
<div id='innerbox'><span><h4 id='emptyInfo'></h4></span><div>
<script>
$('#innerbox').hide();
</script>
</div>
<script>
$('#name').css('color','black');
$('#name').css('text-align','center');
$(document).ready(function () {
var originalText = $('#name').text();
var tOut;
$("#box").hover(
function () {
tOut = setTimeout(function(){
$('#innerbox').show('slow',function(){
$('#emptyInfo').fadeOut(400, function () {
$(this).text('Welcome to my website').slideDown().css('text-align','center');
});
});
},1000);
},
function(){
clearTimeout(tOut);
$('#innerbox').hide('slow',function(){
$('#emptyInfo').hide('slow');
});
}
);
});
</script>
</body>
</html>
CSS
#box {
background-color: lightgrey;
width: auto;
padding: 25px;
margin: 25px;
}
#emptyInfo{
font-size: 150%;
}
#innerbox {
background-color: white;
width: auto;
height: 30px;
border-radius: 10px;
border : 1px;
border-style: solid;
border-color: darkgrey;
}
就像伊曼纽尔( #emptyInfo { margin: 0; }
提到的那样,标题标签以其自己的边距烘焙,设置#emptyInfo { margin: 0; }
#emptyInfo { margin: 0; }
将解决您的问题。
为了参考这些默认值,可以检查浏览器的特定默认样式表。 请参阅此处: 如何找到浏览器的默认样式表?
请注意,由于大多数HTML元素都带有默认值,因此HTML / CSS的作者通常会按照W3C的详细介绍对它们的页面进行“规范化”: http : //www.w3.org/International/questions/qa-html-css-normalization 。
#innerbox高度应为自动。 这是JSfiddle
#innerbox {
background-color: white;
width: auto;
height: auto; /*** This should be auto instead of 30px */
border-radius: 10px;
border : 1px;
border-style: solid;
border-color: darkgrey;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.