CSS不会对齐DIV中的文本答案

【问题标题】：CSS wont align text in DIVCSS不会对齐DIV中的文本
【发布时间】：2015-02-16 09:23:22
【问题描述】：

我是学习 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;
}

【问题讨论】：

你必须重置默认<h4>边距：#emptyInfo { margin: 0; }。
哇。这有帮助。非常感谢。我觉得花这么多时间在这件小事上太愚蠢了。再次感谢

标签： javascript jquery html css

【解决方案1】：

就像伊曼纽尔提到的那样，标题标签带有自己的边距，设置 #emptyInfo { margin: 0; } 将解决您的问题。

要了解这些默认值可能适合您，您可以查看浏览器的特定默认样式表。见这里：How can I locate the default style sheet for a browser?

请注意，由于大多数 HTML 元素都带有默认值，因此 HTML/CSS 作者通常会“规范化”他们的页面，如 W3C 所述：http://www.w3.org/International/questions/qa-html-css-normalization。

【讨论】：

【解决方案2】：

#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;
}

【讨论】：