发表新帖
发表新帖

Cross browser div center alignment using CSS

前端 未结
关注
4 1046
醉话见心
醉话见心 2020-12-08 03:22

What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div

相关标签:
4条回答
  • 孤城傲影
    2020-12-08 03:32

    Check this Demo jsFiddle

    Set following two things

    1. HTML align attribute value center

    2. CSS margin-left and margin-right properties value set auto

    CSS

    <style type="text/css">
     #setcenter{
          margin-left: auto;
          margin-right: auto;    
          // margin: 0px auto; shorthand property
     }
</style>

    HTML

    <div align="center" id="setcenter">
   This is some text!
</div>
    0 讨论(0)
  • 难免孤独
    2020-12-08 03:34

    Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end. 

    #content {
    width: 300px;
    margin: 0 auto;
}

    This is perfectly crossbrowser compatible.

    Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to 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 a copy'n'paste'n'runnable example:

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 2935404</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>

    That said, vertical centering is usually seldom applied in real world.

    If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.

    0 讨论(0)
  • 误落风尘
    2020-12-08 03:43

    "If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience."

    You could .hide() the div when the DOM is ready, wait for the page to load, set the div margin-left and margin-top values, and .show() the div again.

    $(function(){
   $("#content").hide();
)};
$(window).bind("load", function() {
   $("#content").getDimSetMargins();
   $("#content").show();
});
    0 讨论(0)
  • 旧巷少年郎
    2020-12-08 03:53

    "Vertical centering is only possible if the element is positioned absolutely and has a known height." – This statement is not exactly correct.

    You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.

    If your HTML is this;

    <div id="container">
    <div id="aligned-middle" class="inline-block">Middleman</div>
    <div class="strut inline-block">&nbsp;</div>
</div>

    And your CSS is:

    #container {
    /* essential for alignment */
    height:300px;
    line-height:300px;
    text-align:center;
    /* decoration */
    background:#eee;
}
    #aligned-middle {
        /* essential for alignment */
        vertical-align:middle;
        /* decoration */
        background:#ccc;
        /* perhaps, reapply inherited values, so your content is styled properly */
        line-height:1.5;
        text-align:left;
    }
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
    #container .strut {
        /* parent's height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    *display:inline;/* for IE < 8 */
    *zoom:1;/* for IE < 8 */
}

    Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.

    Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.

    You can view a working example of this here: http://jsfiddle.net/UXKcA/3/

    edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)

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