垂直对齐多行文字与图像（响应，div动态），图像大小得到缩放到4倍

它是如此令人沮丧的CSS，我真的很难搞清楚如何做到这一点。垂直对齐多行文字与图像（响应，div动态），图像大小得到缩放到4倍

让我解释我到底想要达到什么目的。我正在使用wordpress，并有一个div，我试图垂直对齐文本和图像的多行，以便文本变为图像居中。图片是响应式的，以及div大小是动态的。我曾尝试与固定的宽度和高度，图像和文本，使用display:table和display:table-cell

的问题是图像越来越缩放到4times其上传大小

HTML

<div class="image"> 
    <img class="size-full wp-image-12291 alignleft"src="http://example.com/wp-content/uploads/2013/10/terminal1.png" /> 
    <p>I want to get it centered</p> 
</div>

CSS

.image { 
    display:table; 
    padding-top: 50px; 
    padding-bottom: 50px; 
    position: relative; 
    margin-bottom: 10px; 
} 
.image:after { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent; 
    border-right: 30px solid transparent; 
    border-left: 30px solid transparent; 
    position: absolute; 
    left: 50%; 
    margin-left: -30px; 
    bottom: -25px; 
} 
p { 
    display:table-cell; 
    height:100%; 
    vertical-align:middle; 
} 
img { 
    display:table-cell; 
    width:100%; 
    height:auto; 
    vertical-align:middle; 
}

问题是它将图像缩放为其上传大小的4倍。

我已经使用了固定高度和宽度的图像和文本块的显示表，它运行良好。我正在努力解决它的响应图像。

是否有一个原因，这是因为WordPress的发生，因为，当你上传图片到wordpress，它有一个图像大小类大中型选项。如果您注意到HTML中的大图像大小，将被视为课程。这是因为我指定100％。

来源

2013-12-03 ampersand

似乎在这个小提琴做工精细：http://jsfiddle.net/3mfLq/在Chrome/Win7的是什么'.size-full' CSS和'.wp图像，12291'？ –

我认为必须有wordpress的问题 – ampersand

是的，你是对的，它的工作在小提琴中，但很奇怪，我不能用wordpress去正确 – ampersand

你几乎在那里，你试着用显示器：table-cell正是你所需要的。只是不要在图像上使用它，而是在周围的元素上使用它。所以你的图片保持相同的大小。现在你使用宽度：100％，这可以扩大你的形象。

<div class="image"> 
    <div class="row"> 
    <div class="cell"> 
     <img class="size-full wp-image-12291 alignleft"src="https://www.google.de/images/srpr/logo11w.png" /> 
    </div> 
    <p class="cell">I want to get it centered</p> 
    </div> 
</div>

在这里看到的小提琴：http://jsfiddle.net/GHVKM/1/

来源

2013-12-03 19:44:04

垂直对齐多行文字与图像（响应，div动态），图像大小得到缩放到4倍

回答

相关问题