Question

我在下面列出了我的代码：

HTML code：

<div id="click">Click Here</div>
<div id="display" style="display:none">Message</div>

CSS代码：

#click, #display{
    width: 500px;
    height: 50px;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
}

#display{
    height: 100px;  
    position: absolute;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

jquery代码：

$(document).ready(function(){
    $('#click').click(function(){
        $('#display').slideToggle();
    });
});

第一个div在＆＃34;中心完全对齐＆＃34; ＆安培; ＆＃34;切换幻灯片＆＃34;对于第二个div也运作良好，但文本＆＃34;消息＆＃34;没有出现在＆＃34;垂直中心＆＃34;的盒子。相反，它出现在＆＃34;顶部中心＆＃34;的盒子。

请提出一些替代方法来解决问题。谢谢！

Answer 1

您可以使用line-height属性，如下所示

尝试FIDDLE，

将您的CSS更改为

#click,
#display {
  width: 500px;
  height: 50px;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  position: relative;
}

#display {
  line-height: 50px!important;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

希望它适合你

Answer 2

您也可以使用其他一些css属性，例如box-sizing：

＆＃13;

$(document).ready(function() {
  $('#click').click(function() {
    $('#display').css('padding-top', function(){
      var size = (parseInt($(this).css('height'))/2) - parseInt($(this).css('font-size'));
       return size;
    }).slideToggle();
  });
});

＆＃13;

#click,
#display {
  width: 500px;
  height: 50px;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  position: relative;
}
#display {
  height: 100px;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click Here</div>
<div id="display" style="display:none">Message</div>

＆＃13;

Answer 3

如果您想垂直和水平居中元素，最好的办法是使用CSS3 flexbox（support）

＆＃13;

$(document).ready(function() {
    $('#click').click(function() {
        $('#display').slideToggle();
    });
});

＆＃13;

#click,
#display {
    width: 500px;
    height: 50px;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
}

#display {
    height: 100px;
    position: absolute;
    text-align: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

#display > div {
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="click">Click Here</div>
<div id="display" style="display: none;">
    <div>Message
        <br>new line</div>
</div>

＆＃13;

Answer 4

您可以尝试以下代码.css()。它可以帮助您解决问题。

$('#display').css('text-align','center');

如何对齐框中心的文本（使用CSS）来创建幻灯片切换效果（使用jquery）？

4 个答案: