blocks|key|5121913|text|根据样式表，位置是相对的，所以您是否尝试将它们设置为display:+block和margin-top:+auto;+margin-bottom:+auto;？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5121914|另一种选择是在javascript中基于包含div的高度手动对齐它们。|5121915|entityMap^0|Q|E|15|12|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>The positions are relative according to the style sheet, so did you try setting them to <code>display: block</code> and <code>margin-top: auto; margin-bottom: auto;</code> ?</p>

<p>Another option is to align them manually in javascript based on the containing div's height.</p>


blocks|key|212402|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212403|http://www.brunildo.org/test/img_center.html|offset|length|212404|垂直居中是一种痛苦！下面是W3C页面对垂直中心的描述：|212405|212406|+CSSLevel2没有垂直居中的属性。在CSS级别3中可能会有一个，但即使在CSS2中，你也可以通过组合几个属性来垂直居中。技巧是指定外部块将格式化为表格单元格，因为表格单元格的内容可以垂直居中。|blockquote|212407|212408|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|18|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>Try this:</p>

<p><a href="http://www.brunildo.org/test/img_center.html" rel="nofollow noreferrer">http://www.brunildo.org/test/img_center.html</a></p>

<p>Vertical centering is a pain! Here's what the W3C page says about the vertical center:</p>

<blockquote>
  <p>CSS level 2 doesn't have a property
  for centering things vertically. There
  will probably be one in CSS level 3.
  But even in CSS2 you can center blocks
  vertically, by combining a few
  properties. The trick is to specify
  that the outer block is to be
  formatted as a table cell, because the
  contents of a table cell can be
  centered vertically.</p>
</blockquote>


blocks|key|212470|text|这个方法涉及到一些jquery，但在大多数情况下都很有效……让我解释一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212471|如果幻灯片的所有图像都包含在它们自己的元素div+pos:absolute中，并且这些图像是pos:relative，那么在$(window).load()上，您可以运行.each()并找到幻灯片中的每个img，并将其顶部位置调整为从顶部偏移一定数量的像素。|212472|jcycle会自动将每个包含图像的父div设置为pos:absolute，所以对它们应用这个pos调整是没有用的……相反，将您设置为pos:relative的每个img作为目标...|212473|示例如下：|212474|$(window).load(function()+{

++//+move+all+slides+to+the+middle+of+the+slideshow+stage
++var+slideshowHeight+=+600;+//this+can+dynamic+or+hard-coded

++$('.slideImg').each(function(index)+{

++++var+thisHeight+=+$(this).innerHeight();
++++var+vertAdj+=+((slideshowHeight+-+thisHeight)+/+2);
++++$(this).css('top',+vertAdj);

++});

});|code-block|syntax|javascript|212475|这是它正在处理的html+..。|212476|<div+class="slideshow"+style="position:+relative;+">

+++<div+style="position:+absolute;+top:+0px;+left:+0px;+display:+none;+width:+1000px;+height:+600px;+"+id="img0">
+++++++<img+class="slideImg"+src="/images/picture-1.jpg"+style="top:+0px;+">
+++</div>


+++<div+style="position:+absolute;+top:+0px;+left:+0px;+display:+none;+width:+1000px;+height:+600px;+"+id="img1">
+++++++<img+class="slideImg"+src="/images/picture-1.jpg"+style="top:+89.5px;+">
+++</div>


+++<div+style="position:+absolute;+top:+0px;+left:+0px;+display:+none;+width:+1000px;+height:+600px;+"+id="img2">
+++++++<img+class="slideImg"+src="/images/picture-1.jpg"+style="top:+13px;+">
+++</div>


</div>|212477|只要确保|212478|.slideImg+{
++++position:relative;
}|212479|我想这就是全部了..。我有一个例子，但它是在一个开发网站上..所以这个链接可能不会持久..但是你可以在这里看一下：http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html|offset|length|212480|entityMap|0|LINK|mutability|MUTABLE|url|http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html^0|0|0|0|0|0|0|0|0|0|1L|1P|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1F|8|@]|9|@$W|1G|X|1H|1|1I]]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>This method involves a little jquery, but works fantastic in most situations...
let me explain:</p>

<p>if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..</p>

<p>jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...</p>

<p>Here is the example:</p>

<pre><code>$(window).load(function() {

  // move all slides to the middle of the slideshow stage
  var slideshowHeight = 600; //this can dynamic or hard-coded

  $('.slideImg').each(function(index) {

    var thisHeight = $(this).innerHeight();
    var vertAdj = ((slideshowHeight - thisHeight) / 2);
    $(this).css('top', vertAdj);

  });

});
</code></pre>

<p>and this is the html it's working on...</p>

<pre><code>&lt;div class="slideshow" style="position: relative; "&gt;

   &lt;div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0"&gt;
       &lt;img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "&gt;&lt;!-- the style=top:0 is a result of the jquery --&gt;
   &lt;/div&gt;


   &lt;div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1"&gt;
       &lt;img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "&gt;&lt;!-- the style=top:89.5px is a result of the jquery --&gt;
   &lt;/div&gt;


   &lt;div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2"&gt;
       &lt;img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "&gt;&lt;!-- the style=top:13px is a result of the jquery --&gt;
   &lt;/div&gt;


&lt;/div&gt;
</code></pre>

<p>just make sure </p>

<pre><code>.slideImg {
    position:relative;
}
</code></pre>

<p>I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
<a href="http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html" rel="nofollow">http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html</a></p>


blocks|key|3006513|text|您需要在每个循环项中嵌套两个div。第一个div必须有display:+inline-table；第二个div必须有display:+table-cell；这两个div都有vertical-align:+Mid.|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3006514|所以它的结构应该是这样的：|3006515|<div+class="slide-container">
++++<div+class="slide">
++++++++<div+class="outer-container">
++++++++++++<div+class="inner-container">
++++++++++++++++Centered+content
+++++++++++++</div>
++++++++</div>
++++</div>

++++<div+class="slide">
++++++++<div+class="outer-container">
++++++++++++<div+class="inner-container">
++++++++++++++++Centered+content
+++++++++++++</div>
++++++++</div>
++++</div>
+</div>+|code-block|syntax|javascript|3006516|使用以下css：|3006517|.slide-container+{
++++height:+300px;
}
.outer-container+{
++++height:+300px;
++++display:+inline-table;
++++vertical-align:+middle;
}
.inner-container{
++++vertical-align:+middle;
++++display:+table-cell;
}|3006518|你可以在这里看到它的工作原理http://jsfiddle.net/alsweeet/H9ZSf/6/|offset|length|3006519|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/alsweeet/H9ZSf/6/^0|0|0|0|0|0|E|11|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.</p>

<p>So the structure would look something like this:</p>

<pre><code>&lt;div class="slide-container"&gt;
    &lt;div class="slide"&gt;
        &lt;div class="outer-container"&gt;
            &lt;div class="inner-container"&gt;
                Centered content
             &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="slide"&gt;
        &lt;div class="outer-container"&gt;
            &lt;div class="inner-container"&gt;
                Centered content
             &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
 &lt;/div&gt; 
</code></pre>

<p>With the following css:</p>

<pre><code>.slide-container {
    height: 300px;
}
.outer-container {
    height: 300px;
    display: inline-table;
    vertical-align: middle;
}
.inner-container{
    vertical-align: middle;
    display: table-cell;
}
</code></pre>

<p>You can see it working here <a href="http://jsfiddle.net/alsweeet/H9ZSf/6/" rel="nofollow">http://jsfiddle.net/alsweeet/H9ZSf/6/</a></p>


<p>I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.</p>

<p>I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS</p>

<p>HTML:</p>

<pre><code>&lt;div id="projects"&gt;
  &lt;div class="gallery"&gt;
     &lt;span class="span1"&gt;&amp;#9668;&lt;/span&gt;&lt;span class="span2"&gt;&amp;#9658;&lt;/span&gt;
        &lt;div class="slideshow"&gt;
          &lt;img src="images/img1.png"  /&gt;
          &lt;img src="images/img1.png"  /&gt;
          &lt;img src="images/img1.png"  /&gt;
        &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#main #home-column-2 #projects
{
  width: 330px;
  background: #fefff5;
  height: 405px;
  padding: 12px;
}

#main #home-column-2 #projects .gallery
{
  width: 328px;
  height: 363px;
  position: relative;
  background: url('images/bg-home-gallery.jpg');
}

#main #home-column-2 #projects .gallery img
{
  position: relative;
  z-index: 10;
}
</code></pre>

<p>And in case you want to see it, the jQuery:</p>

<pre><code>$('#home-column-2 #projects .gallery .slideshow').cycle(
{
   fx: 'scrollHorz',
   timeout: 0,
   next: "#home-column-2 #projects .gallery span.span2",
   prev: "#home-column-2 #projects .gallery span.span1"
});
</code></pre>

<p>Any ideas on getting these images to center?</p>


Vertical aligning an absolute positioned div inside a containing div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用jQuery Cycle插件以幻灯片的方式旋转图像。这很好用。我遇到的问题是让这些(不同大小的)图像在包含的div中居中。图片位于一个幻灯片显示div中，该div的位置被Cycle插件设置为绝对。我已经尝试设置行高/垂直对齐等，但没有骰子。下面是相关的HTML和CSSHTML：<div id="project...

问垂直对齐包含div内的绝对定位div
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直对齐包含div内的绝对定位divEN