1. Inicio
  2. Pregunta y respuesta
  3. Cómo horizontal y vertical center a div?

Cómo horizontal y vertical center a div?

2010-12-01 20 views
12

Aquí está el código fuente:Cómo horizontal y vertical center a div?

<div id = "outer"> 
    <div id="top"> 
    .... 
    </div> 

    <div id="inner"> 
    .... 
    </div> 

    <div id="bottom"> 
    .... 
    </div>  
</div>

me gustaría saber cómo hacer que el div (id interno), horizontal & centro vertical? Puedo centro horizontal, pero no puedo hacer un centro vertical ... Gracias.

Fuente

2010-12-01 Tattat

Respuesta

1

La forma más fácil y fiable de hacerlo es con JavaScript. Pruebe el código proporcionado en la publicación del blog this. Intentar hacerlo en CSS es una pesadilla, porque CSS no fue diseñado para manejar la alineación vertical.

Fuente

2010-12-01 15:05:30 syrion

11

Si conoce las dimensiones del div interno, puede usar CSS.

#outer { 
    position: relative; 
} 

#inner { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    left: 50%; 
    top: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
}

hay otras opciones utilizando display: table-cell y vertical-align: middle etc.

Otras opciones incluyen JavaScript para determinar dinámicamente las dimensiones de la div interior y fijados los márgenes negativos como la de arriba.

Fuente

2010-12-01 15:06:09 skajfes

1

Tienes que usar display: table-cell;, vertical-align: middle; para lograr esto sin Javascript.

Fuente

2011-06-08 14:34:49 ricosrealm

0 
<!doctype html> 
<html> 
<head> 
<title>Centered Image Gallery</title> 
<style type="text/css"> 

/* Use height:100% for top-level containers for fluid height */ 
html, body, .container, .placeholder { height: 100%;} 

/* Set image dimensions and offsets */ 
img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; } 

/* Use text-align:center for content container for fluid horizontal centering */ 
.container { text-align:center; } 

/* Use width of less than 100% for Firefox and Webkit */ 
.wrapper { width: 50%; } 

/* Use vertical-align:middle for fluid vertical centering */ 
.placeholder, .wrapper, .content { vertical-align: middle; } 

/* Use inline-block for wrapper and placeholder so vertical-align works */ 
.placeholder, .wrapper { display: inline-block; } 

/* Use min-width to make the inner container a responsive block element */ 
.fixed { min-width: 1px; } 

/* Use display:inline so text-align works */ 
.content { display:inline; } 

@media, 
{ 
.wrapper { display:inline; } 
} 
</style> 

</head> 
    <body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div class="fixed"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
     </div> 
     </div> 
    </div> 
    <span class="placeholder"></span> 
</div> 

</body> 
</html>

Fuente

2012-06-22 00:41:35

1

Supongo que quiere que un div para alinear el centro vertical y horizontal tenga altura y ancho dinámicos en todos los navegadores.

jSfiddle

HTML

<div class="main"> 
    <div class="contentWrapper"> 
     <div class="content">My Content </br> Goes here</div> 
    </div>   
</div>

CSS

.main { 
    border: 1px solid #f00; 
    height: 400px; 
    width: 400px; 
    position: relative 
} 
.contentWrapper { 
    display: table; 
    width: 100%; 
    height: 100%; 
    *height: auto; 
    *position: absolute; 
    *top: 50%; 
} 
.content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    *position: relative; 
    *top: -50%; 
}

Fuente

2012-11-22 09:06:19 Tarun

Cuestiones relacionadas

 Cuestiones relacionadas