Question

我有一个宽度为10％的Div，在其内容中有一个我希望能够垂直居中/水平居中的图像，并调整大小以适合其容器。

当窗口调整大小时它会很好地调整大小，但不知道如何将图像置于容器中心。

<div class="proyecto_holder">
<div class="tipo_proyecto_image">
    <img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
    <div class="proyecto_titulo">This id the title of the project</div>
    <div class="proyecto_tipo">Type of Project</div>
</div>

.proyecto_holder {
    width:100%;
    float:left;
    height:75px;
    overflow:hidden;
    background-color:#F2F2F2;
    margin-top:1px;
}
.tipo_proyecto_image {
    width:10%;
    height:75px;
    float:left;
}
.tipo_proyecto_image img {
    width:80%;
}
.proyecto_datos_holder {
    width:90%;
    height:75px;
    float:left;
}
.proyecto_titulo {
    width:100%;
    float:left;
    font-family: Titillium Web;
    font-size:18px;
    font-weight:bold;
    line-height:20px;
    margin-top:10px;
    color:#666666;
}
.proyecto_tipo {
    float:left;
    font-family: Titillium Web;
    font-size:16px;
    line-height:20px;
    color:#11BB00;
    padding: 10px 15px;
}

以下是演示：https://jsfiddle.net/3t2shesb/

提前致谢。

Answer 1

如果我了解您要执行的操作，请尝试使用transform上的position:relative和img来为您提供以下内容：

.tipo_proyecto_image img {
  width: 80%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

如下所示：

.proyecto_holder {
  width:100%;
  float:left;
  height:75px;
  overflow:hidden;
  background-color:#F2F2F2;
  margin-top:1px;
}
.tipo_proyecto_image {
  width:10%;
  height:75px;
  float:left;
}
.tipo_proyecto_image img {
  width: 80%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.proyecto_datos_holder {
  width:90%;
  height:75px;
  float:left;
}
.proyecto_titulo {
  width:100%;
  float:left;
  font-family: Titillium Web;
  font-size:18px;
  font-weight:bold;
  line-height:20px;
  margin-top:10px;
  color:#666666;
}
.proyecto_tipo {
  float:left;
  font-family: Titillium Web;
  font-size:16px;
  line-height:20px;
  color:#11BB00;
  padding: 10px 15px;
}

<div class="proyecto_holder">
<div class="tipo_proyecto_image">
    <img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
    <div class="proyecto_titulo">This id the title of the project</div>
    <div class="proyecto_tipo">Type of Project</div>
</div>

Answer 2

以下作品......

HTML：

<div class='Container'>
    <img src='test.png'>
</div>

CSS：

div.Container {
    position:absolute;
    top:25%;left:25%;
    width:50%;height:50%;
    background:#FF0;
}
div.Container > img {
    display:block;
    position:absolute;
    left:10%; width:auto;
    top:35%; height:30%;
}

在这里，我在img的css-declaration （2 *）35％+ 30％中分配所有100％的父母身高，并将其用于缩放...也许不是你想要的，但它有效......试试吧:)。

中心图像在可调整的div中

2 个答案: