How to align text in center of box (using CSS) to create slide toggle effect (using jquery)?

Question

I have listed my codes below:

HTML code:

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

CSS code:

#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 code:

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

The 1st div was perfectly aligned in the "center" & the "toggle slide" for 2nd div also worked well but the text "Message" didn't appear in the "vertical center" of the box. Instead, It appeared just on the "top center" of the box.

Please, suggest some alternatives to correct the problem. Thank you!

@A. Wolff your code worked but there's a glitch while toggling the box. The text stays for few milliseconds before the box is fully opened & closed. This makes the transition appear not smooth. Could you plz find a solution to make the transition smooth without pause between the toggle? — 007mrviper, Dec 18 '15 at 08:03

score 0 · Answer 1 · answered Dec 16 '15 at 11:36

0

You can use line-height attribute as below

Try the FIDDLE,

Change your css to

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

Hope it works for you

answered Dec 16 '15 at 11:36

Mayank

1,351
5
23
42

your code also somehow solved the problem but same as "Jai" it worked for just a single line. How to vertically center the multiple lines? Could you plz come up with some solution to this problem? – 007mrviper Dec 18 '15 at 07:35
what do you mean by multiple lines ? can you update the markup in FIDDLE here https://jsfiddle.net/1ojeayLa/ – Mayank Dec 18 '15 at 09:00
Sorry for the late response. I have updated the contents. Could plz take a look why the texts of div aren't vertically centered? OR Plz take a loot at this code: http://jsfiddle.net/xen3go8r/4/ Why doesn;t the box close smoothly? The texts of div is shown before and after closing the box. Could plz solve this glitch? – 007mrviper Dec 27 '15 at 07:22

score 0 · Answer 2 · answered Dec 16 '15 at 11:45

You can use some additional css properties too, like box-sizing:

$(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();
  });
});

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

<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>

your code helped a lot but it worked only for a single line. If multiple lines are created then those lines aren't vertically centered. Could you plz mention some solution to this problem? — 007mrviper, Dec 18 '15 at 07:30

score 0 · Answer 3 · answered Dec 18 '15 at 09:23

If you want to center elements vertically and horizontally, your best bet is to use CSS3 flexbox (support)

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

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

<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>

score -3 · Answer 4 · edited Dec 16 '15 at 11:31

-3

You can try .css() like below code.It may help you to solve out your problem.

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

edited Dec 16 '15 at 11:31

Mayank

1,351
5
23
42

answered Dec 16 '15 at 11:29

Aniruddh Sinh Dhummad

11
3

How to align text in center of box (using CSS) to create slide toggle effect (using jquery)?

4 Answers4