blocks|key|249277|text|试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249278|++.responsive-container{
++++++++++display:table;
++}
++.img-container{
++++++++++display:table-cell;
++++++++++vertical-align:+middle;
+++}|code-block|syntax|javascript|249279|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this one</p>

<pre><code>  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }
</code></pre>


blocks|key|32974|text|使用这个css，因为您已经有了它的标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32975|.img-container+{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
}

.img-container+>+img+{
++margin-top:-50%25;
++margin-left:-50%25;++
}|code-block|syntax|javascript|32976|下面是一个有效的JsBin：http://jsbin.com/ihilUnI/1/edit|offset|length|32977|此解决方案仅适用于正方形图像(因为页边距的百分比顶部值取决于容器的宽度，而不是高度)。对于随机大小的图像，您可以执行以下操作：|32978|.img-container+{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++transform:+translate(-50%25,+-50%25);+/*+add+browser-prefixes+*/
}|32979|工作JsBin解决方案：http://jsbin.com/ihilUnI/2/edit|32980|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ihilUnI/1/edit|1|http://jsbin.com/ihilUnI/2/edit^0|0|0|E|V|0|0|0|0|C|V|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@$I|19|J|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>Use this css, as you already have the markup for it:</p>

<pre><code>.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container &gt; img {
  margin-top:-50%;
  margin-left:-50%;  
}
</code></pre>

<p>Here is a working JsBin: <a href="http://jsbin.com/ihilUnI/1/edit">http://jsbin.com/ihilUnI/1/edit</a></p>

<p>This solution only works for square images (because a percentage margin-top value depends on the width of the container, not the height). For random-size images, you can do the following:</p>

<pre><code>.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}
</code></pre>

<p>Working JsBin solution: <a href="http://jsbin.com/ihilUnI/2/edit">http://jsbin.com/ihilUnI/2/edit</a></p>


blocks|key|249331|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249332|Html|249333|<div+class="responsive-container">
+++++<div+class="img-container">
+++++++++<IMG+HERE>
+++++</div>
</div>|code-block|syntax|javascript|249334|CSS|249335|.img-container+{
++++position:+absolute;
++++top:+0;
++++left:+0;
height:0;
padding-bottom:100%25;
}
.img-container+img+{
width:100%25;
}|249336|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try</p>

<p>Html</p>

<pre><code>&lt;div class="responsive-container"&gt;
     &lt;div class="img-container"&gt;
         &lt;IMG HERE&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}
</code></pre>


blocks|key|33012|text|html代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|33013|<div+class="image-container">+++++<img+src=""/>++++</div>|offset|length|style|CODE|33014|css代码|33015|img
{
++position:+relative;
++top:+50%25;
++transform:+translateY(-50%25);
+}|code-block|syntax|javascript|33016|entityMap^0|0|0|1L|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>html code</p>

<p><code>&lt;div class="image-container"&gt;
    &lt;img src=""/&gt;
   &lt;/div&gt;</code></p>

<p>css code</p>

<pre><code>img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }
</code></pre>


blocks|key|33080|text|创建另一个div，并在div中同时添加'dummy‘和'img-container’|type|unstyled|depth|inlineStyleRanges|entityRanges|data|33081|像下面这样做HTML和CSS|33082|​|33083|html+,+body+{height:100%25;}
.responsive-container+{+height:100%25;+display:table;+text-align:center;+width:100%25;}
.inner-container+{display:table-cell;+vertical-align:middle;}|code-block|syntax|javascript|33084|<div+class="responsive-container">
++++<div+class="inner-container">
		<div+class="dummy">Sample</div>
		<div+class="img-container">
			Image+tag
		</div>
	</div>	
</div>|33085|33086|你可以给出你想要的高度，而不是100%25的“响应式容器”。|33087|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Make another div and add both 'dummy' and 'img-container' inside the div</p>

<p>Do HTML and CSS like follows</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="responsive-container"&gt;
    &lt;div class="inner-container"&gt;
		&lt;div class="dummy"&gt;Sample&lt;/div&gt;
		&lt;div class="img-container"&gt;
			Image tag
		&lt;/div&gt;
	&lt;/div&gt;	
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Instead of 100% for the 'responsive-container' you can give the height that you want.,</p>


<p>I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).</p>

<p>HTML</p>

<pre><code>&lt;div class="responsive-container"&gt;
    &lt;div class="dummy"&gt;&lt;/div&gt;
    &lt;div class="img-container"&gt;
        &lt;IMG HERE&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</code></pre>

<p>How can I vertically align the IMG inside the container? All my images have variable heights and the container can't have a fixed height/line height because it's responsive... Please help!</p>


Vertically align an image inside a div with responsive height

容器

我有下面的代码，它设置了一个容器，当浏览器调整大小时，这个容器的高度会随着宽度的变化而变化(以保持正方形的纵横比)。HTML<div class="responsive-container">    <div class="dummy"></div>    <div class="img-container">    ...

问将div内的图像与响应高度垂直对齐
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div内的图像与响应高度垂直对齐EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将div内的图像与响应高度垂直对齐
EN