Question

我整天都被困在这一天，请帮忙！我知道垂直对齐解决方案遍布S.O但是我找不到（更重要的是理解）我问题的优雅解决方案。

我正在设计个人网站的标题/横幅，虽然我设法将我的IMG集中在它的容器DIV中，但它太小了。这是我的代码：

try {
        FileInputStream fileInputStream = new FileInputStream(excelTemplate);
        HSSFWorkbook workbook = new HSSFWorkbook(fileInputStream);
        for (int i=0; i < workbook.getNumberOfSheets(); i++) {
            for (Row row : workbook.getSheetAt(i)) {
                for (Cell cell : row) {
                    if (cell != null)
                        cell.setCellType(Cell.CELL_TYPE_STRING);
                }
            }
        }

    } catch (IOException e) {
        e.printStackTrace();
    }

结果如下： http://imgur.com/VoOEtQ0

'SODA'这个词太小了，当我将IMG（'SODA'）的最大宽度和最大高度从100％改为200％时，我得到以下结果：

http://imgur.com/CTCaN76

如何在保持IMG中心的同时获得IMG的大小并获得所有浏览器的支持？

感谢任何帮助。

Answer 1

我假设你有这样的结构：

<div class="container">
    <img src="soda.png">
</div>

在这种情况下，使用上面粘贴的代码，如果将最大高度增加到200％，则可以对图像应用负边距，该边距是图像新尺寸的一半高度

我一直在使用带有负边距的绝对定位来居中我的图像，而只是放弃了我自己的垂直对齐。使用左侧和顶部50％的百分比将允许您调整容器的高度或宽度（例如，如果它位于响应式网格中），然后用一半的图像将图像备份回来＃39 ;负边距的宽度和高度将使其居中。

.container {
    position: relative;
    margin-top:50px;
    height:200px;
    min-height:200px;
    background-image:url(hex/hex4.jpg);
    background-position: center;
    background-repeat:repeat;
    background-size:cover;
    line-height:300px;
}

.container img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -(half img width/2)px;
    margin-top: -(half img height/2)px;
    display: block;
}

jsFiddle

在具有背景图像的Div中垂直居中图像？（什么都没有用）

1 个答案:

在具有背景图像的Div中垂直居中图像？ （什么都没有用）

1 个答案:

在具有背景图像的Div中垂直居中图像？（什么都没有用）