jQuery vertical align middle移动整个div

When using jQuery to vertically align text in a div, the entire div moves. The text becomes vertically aligned with the other divs, but is still aligned at the top of the div it is in. How can I stop it from doing that?

当使用jQuery垂直对齐div中的文本时,整个div移动。文本与其他div垂直对齐,但仍然在它所在的div顶部对齐。如何阻止它执行此操作?

Here's a jsfiddle: http://jsfiddle.net/gvwzdjas/

这是一个jsfiddle:http://jsfiddle.net/gvwzdjas/

Sadly the fiddle doesn't exactly show what is happening. I'm not sure of another way to show it...

可悲的是,小提琴并没有准确地显示正在发生的事情。我不确定另一种方式来展示它......

Here is the HTML I'm using.

这是我正在使用的HTML。

         <div class="grid grid-pad">
            <div class="col-1-3">
                <div class="content">
                  <h3>
                     TEXT HERE
                  </h3>
                </div>
            </div>
            <div class="col-1-3">
                <div class="content">
                    <h3>
                      TEXT HERE
                    </h3>
                </div>
            </div>
            <div class="col-1-3">
                <div class="content">
                    <h3>
                      TEXT HERE
                    </h3>
                </div>
            </div>
        </div>

Here's the jQuery I'm using.

这是我正在使用的jQuery。

<script>
  (function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
      return this.each(function(i){
        var ah = $(this).height();
        var ph = $(this).parent().height();
        var mh = Math.ceil((ph-ah) / 2);
        $(this).css('margin-top', mh);
      });
    };
  })(jQuery);
  $('#item').vAlign();
</script>

Here's the CSS I'm using

这是我正在使用的CSS

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

[class*='col-'] {
float: left;
padding-right: 20px; /* column-space */
}

.grid {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.grid:after {
content: "";
display: table;
clear: both;
}

.grid-pad {
padding-top: 10px;
padding-left: 20px; /* grid-space to left */
padding-right: 0px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
}

.col-1-3, .col-4-12 {
width: 33.33%;
}

.content {
height:250px;
background-color:#fff;
text-align:center;
}

3 个解决方案

#1

$('#item').vAlign(); There is no #item in your html

$( '#项目')valign(表格);你的html中没有#item

try

h3{
    position: relative;
}

and

(function ($) {
          // VERTICALLY ALIGN FUNCTION
          $.fn.vAlign = function () {
              return this.each(function (i) {
                  var ah = $(this).height();
                  var ph = $(this).parent().height();
                  var mh = Math.ceil((ph - ah) / 2);
                  $(this).css('top', mh);
              });
          };
      })(jQuery);
      $('h3').vAlign();

take a look at jsfiddle

看看jsfiddle

#2

use without jquery set only in css

仅在css中使用不带jquery的设置

  .content {
height:250px;
position:relative;
background-color:#fff;
text-align:center;
}
.content h3{
position:absolute;
top:50%;
left:50%;
}

Or set this style in jquery option css

或者在jquery选项css中设置此样式

#3

You can alignthe contents vertically using flex property in css , instead of using script.

您可以使用css中的flex属性垂直对齐内容,而不是使用脚本。

DEMO

CSS:

.content {
    display: flex;
    justify-content: center;        /* align horizontal */
    align-items: center;        /*ALIGN VERTICAL*/
    height:250px;
    background-color:#fff;
    text-align:center;
}

#1