All geek questions in one place

How to put a div in the center of another div?

I would like to have one div in the center of the other div horizontally.

    <div id="container">
        <div id="centered">
            hello world;
        </div>
    </div

I tried the style below with the tag "margin: 0px auto", but it only works in FF, not in IE.

    div
    {
        border-width: 2px;
        border-style: solid;
    }
    #centered
    {
        margin: 0 auto;
        width: 30px;
    }
    #container
    {
        width: 100px;
        }

Is there any way to achieve this cross browser?

+3
source share
6 answers

You probably do not include DOCTYPE in your document, thereby throwing IE into quirks mode.

Add this to the top of the file, for example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

See the difference here: with doctype , without doctype .

It is very good practice to always include DOCTYPE in your document to make your site as consistent as possible in browsers. With DOCTYPE and reset, cross browser templates are much more reliable.

DOCTYPE . fooobar.com/questions/39897/...

, - Stackoverflow, , -: Doctype.

+11

. Quirks Doctype. , ( IE) , DOCTYPE , :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

margin: 0 auto.

: " , :

CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

, + + ( ).

+5

IE - PITA. , (cringe).

<table width="100%" height="100%"><tr><td align="center" valign="middle">
CONTENT
</td></tr></td>

, CSS-.

+1

text-align: center; . : div .

+1

, , ems, :

<style type="text/css">

#div1 {
    height: 20em;
    width: 30em;
    border: 1px dashed #000;
    text-align:center;
}

#div2 {
    height: 5em;
    width: 5em;
    border: 1px solid #000;
    margin: auto;
    margin-top: 25%;
    margin-bottom: -25%;
    line-height: 5em;
}
</style>

<div id="div1">
    <div id="div2">Woot!</div>
</div>

25%, - -25%. , .

0

... div class= "content" div position: relative...

<style>

 .wrapper {
     width:200px;/* this is size range */
      height:100px;  
 position:absolute;
 left:50%;top:50%;
 visibility:hidden;
}

.content {
 position:relative;
 width: 100%;height:100%;
 left:-50%;top:-50%;
 visibility:visible;
}

</style>

<div style="position:relative;width:500px;height:400px;background:#ff00ff;">

  <div class="wrapper">
   <div class="content">

   ... so you has div  on center ...

   </div>
  </div>

</div>
0

Source: https://habr.com/ru/post/1718524/

More articles:


All Articles