发表新帖
发表新帖

Vertically align div (no tables)

后端 未结
关注
8 1292
孤街浪徒
孤街浪徒 2020-12-02 17:38

I can horizontally align a div and all the content looks nice. Looking to vertical align a div that does not contain any tables. I tried setting margin positions to some neg

相关标签:
8条回答
  • 不思量自难忘°
    2020-12-02 18:06

    Unless you have the ability to explicitly set the height of your container (which doesnt look like that's the case), there is no cross browser solution for vertically centering your DIV container.

    Using a table is completely viable, but you have noted that this cannot be used.

    If javascript is an option, we could easily remedy this for you. A jQuery plugin already exists for vertically aligning a container.

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

    And you would vertically align a DIV block like so:

    $('#example').vAlign();

    Taken from Simple Vertical Align Plugin.

    0 讨论(0)
  • 夕颜
    2020-12-02 18:07

    I think it is possible to do it without display: table.

    this is the example:

    HTML:

    <div class="notificationArea">
    something
</div>

    CSS:

    .notificationArea
{
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 50%;
    left: 50%
}
    0 讨论(0)
  • 面向向阳花
    2020-12-02 18:10

    With pure CSS, this is only possible if the div has a fixed height. You can then position it absolute and set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.

    Here's an SSCCE, just copy'n'paste'n'run. The border is purely presentational, the remaining styles are required.

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 1909753</title>
    </head>
    <style>
        #content {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -150px; /* Negative half of width. */
            margin-top: -100px; /* Negative half of height. */
            border: 1px solid #000;
        }
    </style>
    <body>
        <div id="content">
            content
        </div>
    </body>
</html>

    If there is no means of a fixed height, then you'll need to grasp Javascript and live with the fact that client will see the div quickly being shifted to middle during page load, which might cause a "wtf?" experience.

    0 讨论(0)
  • 耶瑟儿～
    2020-12-02 18:19

    If your main container's height is fluid, your only reliable choice is to use JavaScript ("reliable" is debatable here, of course). In JavaScript, you must first find the height of the container, then the window height and adjust the top offset accordingly. Here's how you'd do it in jQuery:

    $(function() {
    $(window).resize(function() {
        var top = $(window).height() / 2 - $('#content').height() / 2;
        top = top < 0 ? 0 : top;
        $('#content').css('top', top);
    });
    $(window).resize();
});

    And the CSS to make it work:

    #content {
    position: absolute;
    /* Everything else is optional: */
    width: 960px;
    margin: 0 auto;
}

    And the HTML:

    ...
<body>
    <div id="#content">Content here</div>
</body>
</html>

    That's still quite simple, and will work if the user has JavaScript enabled.

    0 讨论(0)
  • 庸人自扰
    2020-12-02 18:22

    There are a few ways to do this, all with compromises.

    • Use position:absolute, a fixed height, and overflow:auto.
    • Use display:table, display:table-cell, and vertical-align:middle
    • Use javascript

    I think option #2 is pretty good.

    edit: I don't think option 2 will work in IE. You may be stuck with javascript if you want to keep the height dynamic.

    0 讨论(0)
  • 野的像风
    2020-12-02 18:25

    Have a look at Vertical Centering With CSS or Vertically center content with CSS or CSS Vertical Centering. Method 3 of first reference is the same as CSS vertical center using float and clear.

    And it's surely a good idea to test the result with a service like browsershots.org

    EDIT: I modified your CSS and markup to implement Method 3:

    css:

    * {
  margin:0;
  padding:0;
}

html,
body {
  height: 100%;
}

body {
  text-align:center;
}

#floater {
  float: left;
  height:50%;
  margin-bottom: -100px;
}

#container
{
  clear:both;
  position: relative;
  margin: 0 auto;
  width:968px;
  text-align: left;
  height: 200px;
}

...

    markup:

    <body>
<div id="floater"></div>
<div id="container">

...

    The drawback I see in this method is that with CSS you have to know in advance the height of your content, so that you can apply a negative margin of half this height to the floater. In the example I chose 200px.

    See it in action.

    0 讨论(0)
 看不清?
提交回复
热议问题