一个img在左边对齐,一个在中心,两个垂直对齐,在同一个div内

时间:2015-04-09 22:48:52

标签: html css

我正在努力在同一个div中对齐2个imgs。我希望一个在左​​边对齐,另一个在中心。有什么建议吗?

5 个答案:

答案 0 :(得分:0)



div {
  text-align: center;
  background: red;
}
.left {
  float: left;
}
.center {
  clear: left;
}

<div>
  <img class="left" src="http://www.nasa.gov/sites/default/files/images/facebook-icon(3).png">
  <img class="center" src="http://www.nasa.gov/sites/default/files/images/facebook-icon(3).png">
</div>
&#13;
&#13;
&#13;

Fiddle

答案 1 :(得分:0)

div {
    position: relative;
    text-align: center;
}
.left {
    position: absolute;
    left: 0;
}
<div>
    <img src="http://placehold.it/50x50" class="left">
    <img src="http://placehold.it/50x50">
</div>

答案 2 :(得分:0)

很容易,只需指定你的div,也许给它一个类

<div class="mydiv">
 <img src="(your-image)" width="(size)"        height="(size)" class="leftAlign">
  <img src="(your second image)" width="(size)" height="(size)" class="centerAlign" >
 </div>

这是一个用于对齐的样式表

  .mydiv{
width:100%;  
}
 .leftAlign{
position:absolute;
top:20px;
left:0px;
}
  .centerAlign{
position:absolute;
top:20px;
left:0;
right:0;
margin:auto;
}

这可能对您有用。 我希望它有所帮助。

答案 3 :(得分:0)

实际上,bpeterson76,你的代码并不以.center为中心。 看看这个:

div {
  position: relative;
}
.left {
  position: absolute;
  left: 0;
}
.center {
  position: absolute;
  left: 50%;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

http://jsfiddle.net/4h8g9prb/

它完美无缺,唯一的缺点是浏览器支持IE9或更高版本。

答案 4 :(得分:0)

&#13;
&#13;
div {
    background: red;
    text-align: center;
}
div img{
    vertical-align: middle;
}
.left {
   float:left;
}
&#13;
<div>
    <img src="//placehold.it/50x50" class="left" />
    <img src="//placehold.it/50x50" />
</div>
&#13;
&#13;
&#13;