定位图像和文本

Question

我在容器div中有图片和文字。

我希望img向左浮动并且页面的文本中心但是我不能这样做。图像和文本都有自己的div s。

我该怎么做？

这是我的CSS和HTML：

 #ImageDiv {
   position: relative;
   margin: auto;
   width: 250px;
   height: auto;
   float: left;
 }
 #TextDiv {
   position: relative;
   width: auto;
   height: auto;
   text-align: center;
   margin: auto;
   float: left;
 }
 #ContainerDiv {
   text-align: center;
   width: auto;
   height: 104px;
   background-color: rgb(252, 251, 249);
   position: relative;
   border-radius: 5px;
   border-style: inset;
   border-width: 2px;
   font-size: 22px;
   color: rgb(46, 84, 0);
   margin: auto;
 }

<div id="ContainerDiv">
  <div id="ImageDiv">
    <img style="float: left; margin-right: 5px;" src="imagePath" alt="Alternate Text" />
  </div>
  <div id="TextDiv">
    <h5>Some Text Goes Here...</h5>
  </div>
</div>

Answer 1

这是一个定位文本div的选项

#ContainerDiv {
    position: relative;    position: relative;
    border:1px solid red;
    overflow: hidden; /* quick clearfix */

}

#ImageDiv{
    float:left;
}

#ImageDiv img {
    display: block;
}

#TextDiv{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background: #bada55;
}

<div id="ContainerDiv">
        <div id="ImageDiv"><img src="http://lorempixel.com/output/animals-q-c-150-150-1.jpg" alt="Alternate Text" /> </div>
        <div id="TextDiv"><h5>Some Text Goes Here...</h5></div>
</div>