Question

我正在尝试在标题div中对齐三个图像。我需要左边的一个图像 - 一次居中 - 右边的图像。我左边有图像，中心图像到位。但是，我无法在右侧显示我需要的图像，以显示在居中图像的右侧。如果我漂浮：离开居中的图像，它会在各种浏览器中弄乱我的居中图像。我想要的图像显示在居中图像的左侧。如何在居中图像的右侧获取它？非常感谢你。

这是我的代码：

HTML：

<div class="header">

<div class="headerLeft">

<img src="salogo_lg.jpg"
 width="105"
 height="115"
 alt="Salvation Army Logo" />

</div> <!-- closing tag of headerLeft-->

<div class="headerCenter">

<img src="logo85.jpg"
width="485"
height="93"
alt="Salvation Army" />

</div>  <!-- closing tag of headerCenter -->

<div class="headerRight">

<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />

</div>  <!-- closing tag of headerRight -->


</div> <!-- closing tag of header -->

CSS：

.header{
width: 100%;
height: 115px;
background-color: #0B0B3B;
margin-bottom: -15px;
}

.headerLeft{
float: left;
width: 105px;
height: 115px;
}

.headerCenter{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 485px;
height: 93px;
}

.headerRight{
float: left;
text-align: right;
margin-left: 15px;
width: 105px;
height: 115px;
}

Answer 1

快速回答：

*
{
    box-sizing: border-box;
}

header
{
    background: grey;
    color: white;
    padding: 1em;
    position: relative;
    height: 5em;
    width: 100;
}

img
{
    display: block;
    height: 3em;
    margin: auto;
}

img.right
{
    position: absolute;
    right: 1em;
    top: 1em;
}

img.left
{
    left: 1em;
    position: absolute;
    top: 1em;
}

<header>
    <img src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" class="left" />
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRBzTbPH8FRYR0HRqTmXnwSO4GgLbFO6rpALpwynKRr4SM_nTCywQQO6qvDcg" alt="" class="center" />
    <img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="" class="right" />
</header>

Answer 2

为避免使用position: absolute;，我建议您使用calc帮助，并将.headerCenter包裹在.headerCenterWrapper中，如下所示。

CSS：

.headerLeft {
  width: 105px;
  height: 115px;
  display: inline-block;
}

.headerCenterWrapper {
  width: calc(100% - 220px); /* Using a number slightly more than the sum of the side images' widths (210 px) to be safe */
  height: 115px;
  display: inline-block;
  text-align: center;
}

.headerCenter {
  width: 50px;
  height: 115px;
  display: inline-block;
}

.headerRight {
  width: 105px;
  height: 115px;
  display: inline-block;
}

HTML：

<header class="header">
  <img src="" alt="" class="headerLeft"/>
  <div class="headerCenterWrapper">
    <img src="" alt="" class="headerCenter" />
  </div>
  <img src="" alt="" class="headerRight" />
</header>

Answer 3

CSS

.headerLeft{
float: left;
width: 33.33%;
height: 115px;
}

.headerCenter{
margin-left: auto;
margin-right: auto;
width: 33.33%;
height: 115px;
float:left;
text-align:center;
}

.headerRight{
float: right;
width: 33.33%;
height: 115px;
text-align:right;
}

HTML

<div class="header">

<div class="headerLeft">

<img src="manish.png"
 width="105"
 height="115"
 alt="Salvation Army Logo" />

</div> <!-- closing tag of headerLeft-->

<div class="headerCenter">

<img src="manish.png"
width="105"
height="115"
alt="Salvation Army" />

</div>  <!-- closing tag of headerCenter -->

<div class="headerRight">

<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />

</div>  <!-- closing tag of headerRight -->


</div>

我正努力在我的标题中对齐三张图片

3 个答案: