定位图像和文字

我在容器中有一个图像和文字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>

来源

2015-01-08 Curious

设计图像会帮她一个选项e但我怀疑你必须在两个子div中的一个上使用绝对定位。 –

我试图在imageDiv上使用绝对定位。但之后，我不能把文本放到页面的中心，我不明白为什么 – Curious

转到jsfiddle.net，在那里复制你的代码，保存它，然后回来 - 这将有助于看到你在 – robjez

这里的哪个位置的文本格

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

来源

2015-01-08 15:46:03

定位图像和文字

回答

相关问题