Question

抱歉浪费你的时间那个时候我对html太基本了！

Answer 1

在您的CSS中，您只需删除line-height:500px;

即可

就像那样：

div {
    border:20px solid #660000;
    margin:-20px auto;
    background-color:red;
    color:white;
    height:600px;
    width:300px;
    display:none;
    /*line-height:500px;*/
}

Fiddle已更新

Answer 2

在div下line-height: 500px;，您正在按下p标签。更改为line-height: 1.3;或其他任何问题。

Answer 3

要获得垂直居中的文本，在这种情况下，您需要稍微更改HTML结构。垂直居中的一种方法是使用display:table。所以你必须在HTML中做这样的事情：

<div class="slideme center"> 
    <div id="table">
    <div id="holder">
    <h1>Hello,</h1>
    <p>Can you see Me</p>
    </div>
</div>
</div>

注意：出于演示目的，我使用了ID，但您可以稍后轻松更改选择器。如果你有更多像这样的元素在页面上 - css类是要走的路。

CSS：

.slideme {
    border:20px solid #660000;
margin:-20px auto;
background-color:red;
color:white;
height:600px;

width:300px;
display:none;
}

#table {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
}
#holder {
    display:table-cell;
    vertical-align:middle;
}

和你的jQuery一样 - 改变选择器:(如果你离开通用div选择器，你可以得到意想不到的行为，所以，更具体的，类选择器应该可以工作）

$(document).ready(function() {
$("button").click(function() {
    $(".slideme").slideToggle("slow");
});});

DEMO：http://jsfiddle.net/8vpv1a87/3/

关于line-height的说明：当你只有一行文字时，这个方法很有效，但是如果有2行或更多行 - 文本很简单地向下推...这适用于多行文本/标签..

Answer 4

与其他答案不同，我认为您使用line-height:500px;进行此操作的方式是可以的。但是，您可以通过将h1和p包装在容器中，然后将该容器上的行高设置为您想要的任何值来解决您的问题。

HTML

<div class="slideme center">
  <spanclass="sub"> 
    <h1>Hello,</h1>
    <p>Can you see Me</p>
  </span>
</div>
<button class="center"> Click Me </button>

将此添加到您的CSS：

.sub {
    display: inline-block;
    line-height: 10px;   
}

Fiddle

注意：您不应该拥有多一个class属性。请注意我是如何将您的两个类合并到一个class属性中的，将它们用以下空格分隔：<div class="slideme center">。

CSS，JQuery，HTML <p>没有在幻灯片课上看到过

4 个答案: