中心的图像未知高度宽度 [英] Image in center of div unknown height width

问题描述

我想使用 CSS Trick 。但是如果图像大小是随机的（不固定的）。令人惊讶的是，我不想保持图像响应，我想把图像放在中心，而不改变其宽度或高度（实际像素）。

下面是我的代码： / p>

HTML：

 < div class =slider> < img class =centersrc =images / mySlide.jpg/>< / div> 
  

CSS：

 code> .slider {
 width：100％; 
 position：relative; 
} 
 .center {
 width：300px; 
 height：300px; 
 position：absolute; 
 left：50％; 
 top：50％; 
 margin-left：-150px; 
 margin-top：-150px; 
} 
  

解决方案

这：

http://jsfiddle.net / NicoO / y5vh3 / 2 /

  .slider {
 width：100％; 
 position：relative; 
 text-align：center; 
 height：400px; 
} 
 .slider：before 
 {
 height：inherit; 
 display：inline-block; 
 vertical-align：middle; 
 content：; 
} 
 
 .center {
 display：inline-block; 
 margin：auto; 
 vertical-align：middle; 
} 
  

使用此类HTML：

 < div class =slider> 
< img class =centersrc =http://www.placehold.it/100x40/> 
< / div> 
  

I want to center an image using CSS Trick. But what if the image size will be random(not-fixed). Surprisingly I don't want to keep image responsive, I want to bring image in center without changing its width or height(actual pixel).

Below is my code:

HTML:

<div class="slider"><img class="center" src="images/mySlide.jpg" /></div>

CSS:

.slider{
       width: 100%;
       position: relative;
}
.center {
       width: 300px;
       height: 300px;
       position: absolute;
       left: 50%;
       top: 50%; 
       margin-left: -150px;
       margin-top: -150px;
}

解决方案

You can center any image like this:

http://jsfiddle.net/NicoO/y5vh3/2/

.slider {
    width: 100%;
    position: relative;
    text-align: center;
    height: 400px;
}
.slider:before
{
    height: inherit;
    display: inline-block;
    vertical-align: middle;
    content:"";
}

.center {
    display: inline-block;
    margin: auto;
    vertical-align: middle;
}

With such HTML:

<div class="slider">
    <img class="center" src="http://www.placehold.it/100x40" />
</div>

这篇关于中心的图像未知高度宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！