Question

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

Answer 1

＆＃13;

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

＆＃13;

<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;

Fiddle

Answer 2

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>

Answer 3

很容易，只需指定你的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;
}

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

Answer 4

实际上，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或更高版本。

Answer 5

＆＃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;

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

5 个答案: