定位圖像和文字

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

這裏的哪個位置的文本格

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