html - horizontally - Cómo centrar un elemento "posición: absoluta"
css center image in div (23)
Aquí es fácil y la mejor solución para el elemento central con "posición: absoluta"
body,html{
min-height:100%;
}
div.center{
width:200px;
left:50%;
margin-left:-100px;/*this is 50% value for width of the element*/
position:absolute;
background:#ddd;
border:1px solid #999;
height:100px;
text-align:center
}
<style>
</style>
<body>
<div class=''center''>
should be centered verticaly
</div>
</body>
Tengo un problema al centrar un elemento que tiene la position atributo establecida en absolute . ¿Alguien sabe por qué las imágenes no están centradas?
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
<li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
</ul>
</div>
</body>
Centrar algo en una posición absolute es bastante complicado en CSS.
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
Cambie el margin-left a (negativo) la mitad del ancho del elemento que está intentando centrar.
Centrar un elemento "posición: absoluta".
agrega estos
left: 0%;
right: 0%;
text-align: center;
o estos
left: 0%;
right: 0%;
margin: 0 auto;
elemento : posición absoluta
.element {
position: absolute;
}
elemento centrado
.element {
position: absolute;
left: 0%;
right: 0%;
text-align: center; // or this -> margin: 0 auto;
}
Esto funcionó para mí:
position: absolute;
left: 50%;
transform: translateX(-50%);
La posición absoluta lo saca del flujo y lo coloca en 0x0 al padre (el último elemento de bloque tiene una posición absoluta o posición relativa).
No estoy seguro de qué es exactamente lo que está tratando de lograr. Podría ser mejor establecer el li en una position:relative y eso los centrará. Dado tu CSS actual
Echa un vistazo a http://jsfiddle.net/rtgibbons/ejRTU/ para jugar con él
Lo más sencillo, lo mejor:
img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
position: absolute;
}
Luego, debe insertar su etiqueta img en una etiqueta que tenga posición deportiva: propiedad relativa, de la siguiente manera:
<div style="width:256px; height: 256px; position:relative;">
<img src="photo.jpg"/>
</div>
Lo que parece estar sucediendo es que hay dos soluciones; Centrado utilizando márgenes y centrado utilizando posición. Ambos funcionan bien, pero si desea posicionar de manera absoluta un elemento relativo a este elemento centrado, debe usar el método de posición absoluta, ya que la posición absoluta del segundo elemento se establece de manera predeterminada en el primer elemento primario. Al igual que:
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
Hasta que leí esta publicación, utilizando el margen: 0 técnica automática, para crear un menú a la izquierda de mi contenido, tuve que construir una columna del mismo ancho a la derecha para equilibrarlo. No es bonito. ¡Gracias!
Puedes intentarlo de esta manera:
* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative;
text-align: center;
background-image: url(''https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'');
background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px;
display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
<div id="body" class="container-fluid">
<!--Background-->
<!--Text-->
<div class="text">
<p>Random</p>
</div>
</div>
</body>
</html>
Si no conoce el ancho del elemento, puede usar este código:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
Demostración en fiddle: http://jsfiddle.net/wrh7a21r/
Fuente: https://.com/a/1777282/1136132
Si quieres centrar un elemento absoluto.
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Si desea que un contenedor se centre de izquierda a derecha, pero no con arriba a abajo
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Si desea que un contenedor se centre de arriba a abajo, independientemente de que esté de izquierda a derecha
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Actualización a partir del 15 de diciembre de 2015.
Bueno, aprendí este otro truco nuevo hace unos meses. Suponiendo que tiene un elemento padre relativo.
Aquí va tu elemento absoluto.
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
Con esto, creo que es una mejor respuesta que mi solución anterior. Ya que no tienes que especificar el ancho y la altura. Este adapta el contenido del propio elemento.
Sin saber el width / height del elemento 1 posicionado, aún es posible alinearlo de la siguiente manera:
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
Vale la pena señalar que CSS Transform es compatible con IE9 y superior . (Prefijos de proveedores omitidos por brevedad)
Explicación
Al agregar la top / left del 50% mueve el borde superior / izquierdo del elemento al centro del elemento principal, y la función translate() con el valor (negativo) de -50% mueve el elemento en la mitad de su tamaño. Por lo tanto, el elemento se colocará en el centro.
Esto se debe a que un valor de porcentaje en top propiedades top / left es relativo a la altura / anchura del elemento principal (que está creando un bloque contenedor).
Mientras que un valor porcentual en la función de transform translate() es relativo al ancho / alto del propio elemento (en realidad se refiere al tamaño del cuadro delimitador ) .
Para la alineación unidireccional, vaya con translateX(-50%) o translateY(-50%) lugar.
1. Un elemento con una position no sea static . Es decir, valores relative , absolute , fixed .
Un objeto absoluto dentro de un objeto relativo es relativo a su padre, el problema aquí es que necesita un ancho estático para el contenedor #slideshowWrapper , y el resto de la solución es como dicen los demás usuarios
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align:center;
width: 500px;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: relative;
left: 50%;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
Un simple truco de CSS, solo agrega:
width: 100%;
text-align: center;
Esto funciona tanto en imágenes como en texto.
Usando left: calc(50% - Wpx/2); donde W es el ancho del elemento funciona para mí.
Use margin-left: x%; donde x es la mitad del ancho del elemento.
para centrar la posición aa: atributo absoluto que debe establecer a la izquierda: 50% y margen izquierdo: -50% del ancho de la div.
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class=''center''>
should be centered horizontaly
</div>
</body>
para el centro vertical absoluto necesitas hacer lo mismo con el brote, no con la izquierda solo con la parte superior. (NOTA: el html y el cuerpo deben tener una altura mínima de 100%;)
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class=''center''>
should be centered verticaly
</div>
</body>
y se puede combinar para ambos
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class=''center''>
should be centered
</div>
</body>
No estoy seguro de lo que quiere lograr, pero en este caso, simplemente agregando width: 100%; a su ul#slideshow li hará el truco.
Explicación
Las etiquetas img son elementos de bloque en línea. Esto significa que fluyen en línea como texto, pero también tienen un ancho y alto como elementos de bloque. En tu css hay dos text-align: center; Las reglas aplicadas al <body> y al #slideshowWrapper (que es redundante por cierto) hacen que todos los elementos secundarios en línea y en línea se #slideshowWrapper en sus elementos de bloque más cercanos, en su código, estas son etiquetas li . Todos los elementos de bloque tienen un width: 100% si son el flujo estático ( position: static; ), que es el valor predeterminado. El problema es que cuando le dices a li tags que sea position: absolute; , los sacas del flujo estático normal, y esto hace que reduzcan su tamaño para que se ajusten a su contenido interno, en otras palabras, "pierden" su width: 100% propiedad del width: 100% .
Div alineación vertical y horizontalmente centro
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
Nota: Los elementos deben tener ancho y alto para ser establecidos
Sus imágenes no están centradas porque los elementos de su lista no están centrados; solo su texto esta centrado. Puede lograr el posicionamiento que desee centrando la lista completa o centrando las imágenes dentro de la lista.
Puede encontrar una versión revisada de su código en la parte inferior. En mi revisión, centro la lista y las imágenes que contiene.
La verdad es que no puede centrar un elemento que tiene una posición establecida en absoluta.
¡Pero este comportamiento puede ser imitado!
Nota: estas instrucciones funcionarán con cualquier elemento de bloque DOM, no solo con img.
Rodee su imagen con una etiqueta div u otra (en su caso, un li).
<div class="absolute-div"> <img alt="my-image" src="#"> </div>Nota: Los nombres dados a estos elementos no son especiales.
Modifique su css o scss para darle al div posicionamiento absoluto y su imagen centrada.
.absolute-div { position: absolute; width: 100%; // Range to be centered over. // If this element''s parent is the body then 100% = the window''s width // Note: You can apply additional top/bottom and left/right attributes // i.e. - top: 200px; left: 200px; // Test for desired positioning. } .absolute-div img { width: 500px; // Note: Setting a width is crucial for margin: auto to work. margin: 0 auto; }
¡Y ahí lo tienes! Tu img debe estar centrado!
Tu codigo:
Probar esto:
body
{
text-align : center;
}
#slideshow
{
list-style : none;
width : 800px;
// alter to taste
margin : 50px auto 0;
}
#slideshow li
{
position : absolute;
}
#slideshow img
{
border : 1px solid #CCC;
padding : 4px;
height : 500px;
width : auto;
// This sets the width relative to your set height.
// Setting a width is required for the margin auto attribute below.
margin : 0 auto;
}
<ul id="slideshow">
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>
Espero que esto haya sido útil. ¡Buena suerte!
html, body, ul, li, img {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#slideshowWrapper {
width: 25rem;
height: auto;
position: relative;
margin-top: 50px;
border: 3px solid black;
}
ul {
list-style: none;
border: 3px solid blue;
}
li {
/* center horizontal */
position: relative;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
/* center horizontal */
border: 3px solid red;
}
img {
border: 1px solid #ccc;
padding: 4px;
//width: 200px;
height: 100px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
<li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
<li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>
</ul>
</div>
</body>
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
No recuerdo dónde vi el método de centrado enumerado anteriormente, usando valores negativos superiores, derechos, inferiores, izquierdos. Para mí, esta técnica es la mejor, en la mayoría de las situaciones.
Cuando uso la combinación de arriba, la imagen se comporta como una imagen de fondo con las siguientes configuraciones:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
Más detalles sobre el primer ejemplo se pueden encontrar aquí:
Mantener la relación de aspecto de un div con CSS
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
Ver demostración en: http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center ; trabaja con una position: absolute elemento position: absolute al agregar left: 0; right: 0; left: 0; right: 0;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;