css - CSS对齐，图像和文本

Question

我想把一张图片放在左边，一张图片放在右边，文字放在中间。

我一直在想我很接近然后一个或另一个逃跑了！我将不胜感激一些帮助和指导。

下面的页面和 CSS 代码

VB页面

<div id="HeaderTitleWrapper">

<h2><img src="images/Header/logo.jpg" alt="Writting Icon" /> 
<div id="HeaderTel"> 
GATEWAY<img src="images/Header/pic2.jpg" alt="Writing Icon" />
&nbsp;</div> <!-- HeaderTel -->
</h2>


</div> <!-- HeaderTitleWrapper -->

CSS

/* Header Text Title  */


#HeaderTitleWrapper {
  width: 1000px ;
  margin-left: auto ;
  margin-right: auto ;

}

#HeaderTitleContent {    
    padding: 0px;    
    height: auto;
    position: relative;
    left: 0px;
    top:10px;

}

#HeaderTel 
{

    position:absolute;
    right:150px;
    top:auto;

}

Answer 1

<div
id="firstImage">
    <img
    src="1.jpg"
    alt="Writting Icon"
    />
    </div>
    <span
    id="Text">
        GATEWAY
        </span>
        <div
        id="secondImage">
            <img
            src="2.jpg"
            alt="Writing Icon"
            />
            </div>
            <!-- HeaderTel -->
    </div>

Answer 2

使用 text-align:justify 和 pseudo ，您可以从左到右喷射内联框。

<header>
    <img/>
    <span>text</span>
    <img/
<header>

header {
   line-height:0;
   text-align:justify;
}
header span {
   display:inline-block;
   vertical-align:middle;
   line-height:1.2em;
}
header:after {
   content:'';
   display:inline-block;
   width:99%;
   vertical-align:top;
}

类似的例子：http: //codepen.io/gcyrillus/pen/dlvCp