垂直对齐，水平对齐图像的最简单方法是什么？ [英] Easiest way to vertically align, horizontally aligned images?

问题描述

垂直对齐不同大小的水平对齐图像最简单，最快捷的方法是什么？ Google上的所有内容都不适合我，或者我没有这样做......我曾尝试在.media和.media img中使用'vertical-align'属性。

这是我的jsfiddle： http://jsfiddle.net/C8DKc/

HTML

 < div id =main> ; 
< div id =avatar> 
< img src =http://i.imgur.com/GgxBXAA.png/> 
< / div> 
< div class =media> 
< img src =http://i.imgur.com/GmT37TG.png/> 
< / div> 
< / div> 
  

CSS

  body {
 background-color：＃e5e5e5; 
 
} 
 
 #main {
 padding：10px; 
 display：inline-block; 
 width：auto; 
背景颜色：红色; 
} 
 
 #avatar {
 display：inherit; 
} 
 
 .media {
 display：inherit; 
} 
 
 .media img {
 margin-left：10px; 
} 
  

解决方案

c $ c> #main 到 display：table-cell 。

  #main {
 padding：10px; 
 display：table-cell; 
 width：auto; 
背景颜色：红色; 
} 
  

然后添加 vertical-align：middle 到 .media （这里是工作示例）

  .media {
 display：inherit; 
 vertical-align：middle; 
} 
  

What is the easiest, quickest way to vertically align differently sized horizontally aligned images? Everything on Google is not working for me or I'm not doing it right... I've tried using the 'vertical-align' property in .media and .media img.

Here's my jsfiddle: http://jsfiddle.net/C8DKc/

HTML

<div id="main">
    <div id="avatar">
        <img src="http://i.imgur.com/GgxBXAA.png" />
    </div>
    <div class="media">
        <img src="http://i.imgur.com/GmT37TG.png" />
    </div>
</div>

CSS

body {
background-color: #e5e5e5;

}

#main {
    padding: 10px;
    display: inline-block;
    width: auto;
    background-color: red;
}

#avatar {
    display: inherit;
}

.media {
    display: inherit;
}

.media img {
    margin-left: 10px;
}

解决方案

Change the parent, #main, to display:table-cell.

#main {
    padding: 10px;
    display: table-cell;
    width: auto;
    background-color: red;
}

Then add vertical-align:middle to .media (working example here)

.media {
    display: inherit;
    vertical-align: middle;
}

这篇关于垂直对齐，水平对齐图像的最简单方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！