相关疑难解决方法(0)

当内容的高度可变时,垂直居中div内容的最佳方法是什么.在我的特殊情况下,容器div的高度是固定的,但如果有一个解决方案可以在容器具有可变高度的情况下工作,那将是很好的.此外,我想要一个没有或很少使用CSS黑客和/或非语义标记的解决方案.

我知道它看起来像是一个被问过多次的问题,但我找不到解决这个非常具体的情况.

这是我的布局的基本线框:

基本上,我有一些不同背景的div,它们占据浏览器窗口的100%宽度和100%高度.在它们的每一个中,另一个div占据其父级的50%宽度,但具有可变高度,具体取决于其内容.

我希望所有这些div-in-a-div都是垂直对齐的.现在,我已经读到了将显示:table-cell和vertical-align:middle放在父节点上应该可以工作,但是在这种情况下它似乎搞得一团糟.: - /

我的代码:

<head>
<style>
     html, body {
            height: 100%;
        }
        body > div {
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        .centered {
            width: 50%;
            margin: 0 auto;
            background: rgba(0,0,0,0.4);
            padding: 50px 0 30px 0;
        }
</style>
</head>
        <body>

            <div id="pic_1">
                    <div class="centered">content</div>
            </div>

            <div id="pic_2">
                    <div class="centered">content</div>
            </div>

            <div id="pic_3">
                    <div class="centered">content</div> 
            </div>  

        </body>

谢谢你的帮助!

无论出于何种原因,我真的打败了自己...毫无疑问,因为缺乏对垂直居中任何事物的真正"正确"方式的支持.

目标:

是有一组四个图像,每个图像都在自己的响应列中.每个图像都有一个白色叠加,当悬停时会显示更多的图像,以及4个图像中每个图像的标题,这些图像在图像内部水平和垂直居中.

如果我设置特定的宽度/高度并将图像粘贴在CSS而不是HTML中,我可以很容易地实现这一点.出于搜索引擎优化的原因,我希望图像出现在HTML中.

此外,由于响应性,图像必须缩放到它们所在列的宽度的100%.因此,由于宽度比例,高度也会缩放.

因此,第一个问题是获取"标题",因为我在我的课程中调用它,显示在图像的顶部.用一个简单轻松完成position: absolute;,以及top: 0;和left: 0;在标题和position: relative;在容器上.

最大的问题和第二个问题是将"图库1"文本垂直居中放在图像的顶部.我必须使用position: absolute;上面提到的位来获取图像的顶部文本.从那里我无法找到display: table;工作的解决方案,也无法获得-50%的保证金解决方案.

这是一个JS小提琴

我的HTML:

<div class="container">
    <img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" />
    <div class="caption">
        <a href="#">Gallery 1</a>
    </div>
</div>

关于如何实现这一点的任何想法？我想保持至少IE8支持,我已经使用selectivizr,所以伪类不打扰我.