Как реагировать, вертикально выравнивать изображение с помощью CSS

Я стараюсь реагировать & вертикально центрировать изображение на странице. Я нашел несколько решений в Интернете, но никто не работает для меня. Изображение застряло в верхнем левом углу. Любые отводы будут потрясающими. Я стучал головой :)Как реагировать, вертикально выравнивать изображение с помощью CSS

Here is the test page

here is an image of the desired finished page

html { 
 

 
     font-family: sans-serif; 
 

 
     /* 1 */ 
 

 
     -ms-text-size-adjust: 100%; 
 

 
     /* 2 */ 
 

 
     -webkit-text-size-adjust: 100%; 
 

 
     /* 2 */ 
 

 
     background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed; 
 

 
     -webkit-background-size: cover; 
 

 
     -moz-background-size: cover; 
 

 
     -o-background-size: cover; 
 

 
     background-size: cover; 
 

 
    } 
 

 
    img.product1:empty { 
 

 
     top: 50%; 
 

 
     left: 50%; 
 

 
     -webkit-transform: translate(-50%, -50%); 
 

 
     -moz-transform: translate(-50%, -50%); 
 

 
     -ms-transform: translate(-50%, -50%); 
 

 
     -o-transform: translate(-50%, -50%); 
 

 
     transform: translate(-50%, -50%); 
 

 
    }

<div> 
 
    <img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" /> 
 
</div>

источник

2015-10-19 Jill

В общем плане, чтобы получить 'верх: 50%; left: 50%; 'work, вам нужно' position: absolute' или 'position: relative' элемента. Вы не хотите сочетать это с 'transform: translate (-50%, -50%),' – ratherblue

на вашей «желаемой странице» у вас белый (как на изображении не растягивается) под изображением. Это то что ты хочешь? –

@sec фактически это то, как вы выровняете абсолютные позиционированные элементы, с функцией 'transform: translate'. но вы правы, ей нужно «абсолютное» или «относительное» для этого. –

Вам нужно будет использовать position:absolute к изображению в пределах дел. Смотрите ниже:

html { 
 
    font-family: sans-serif; 
 
    /* 1 */ 
 
    -ms-text-size-adjust: 100%; 
 
    /* 2 */ 
 
    -webkit-text-size-adjust: 100%; 
 
    /* 2 */ 
 
    background: url("../images/bg-giraffe.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
img.product1:empty { 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; /*You would need to add this*/ 
 
    width: auto; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div> 
 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="product1" /> 
 
</div>

источник

2015-10-19 18:16:05

дисплей: стол отлично работает с IE8 ...

html { 
 
    font-family: sans-serif; 
 
    /* 1 */ 
 
    -ms-text-size-adjust: 100%; 
 
    /* 2 */ 
 
    -webkit-text-size-adjust: 100%; 
 
    /* 2 */ 
 
    background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
} 
 
body { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
img.product1:empty { 
 
    /* not too sure what's your idea here , a background defaut, a div sized, generated content inserted ? */ 
 
}

<div> 
 
    <img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" /> 
 
</div>

легкий путь с младшим братом: Дисплей: сгибать;

html { 
 
    font-family: sans-serif; 
 
    /* 1 */ 
 
    -ms-text-size-adjust: 100%; 
 
    /* 2 */ 
 
    -webkit-text-size-adjust: 100%; 
 
    /* 2 */ 
 
    background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
html { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
img.product1:empty { 
 
    /* not too sure what's your idea here , a background defaut, a div sized, generated content inserted ? */ 
 
}

<div> 
 
    <img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" /> 
 
</div>

источник

2015-10-19 18:22:28

Почти там! Вы можете установить горизонтальное и вертикальное положение с top и left в своем классе product1, как вы это сделали. И тогда это либо абсолютно позиционируется в окне просмотра, либо относительно позиционируется в родительском div.

См. Его в CodePen.

HTML:

<div> 
    <img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" /> 
</div>

CSS:

body{ 
    background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed; 
    background-size: cover; 
} 

img.product1:empty { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

источник

2015-10-19 18:25:44

Как реагировать, вертикально выравнивать изображение с помощью CSS

ответ

Смежные вопросы