2015-10-13 40 views
1

我現在有一些文字是左對齊,但集中如下:浮動圖像向左居中文本的

<div class="center-text">There is some text here</div> 
<div class="center-text">There is also some other text here</div> 
<div class="center-text">Finally there is some text here</div> 

.center-text { 
    width: 50%; 
    margin: auto; 
} 

我怎麼能漂浮的圖像文本的左邊是在右下角?我正在尋找的是以下幾點:

Desired behavior

黑色框架是周圍DIV,紅色是圖像和文本是如上所述。我的文本目前的行爲如預期,但似乎無法在不影響文本的情況下添加圖像。

+1

你可能只想定位圖像絕對不是。 – j08691

回答

0

我做了一點點不同:

.container{ 
 
    height: 300px; 
 
    position:relative; 
 
    border: 30px solid black; 
 
} 
 
.center-text { 
 
    width: 100%; 
 
} 
 
p { 
 
    margin: 0; 
 
} 
 
img{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width:30%; 
 
} 
 
.text{ 
 
    float: right; 
 
    width: 65%; 
 
    margin-top: 100px; 
 
}
<div class="container"> 
 
    <div class="center-text"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLwIM4lLwdmXvvYio988Z70kxTBtoNudITd9_72iGRjlusoVey" /> 
 
     <div class="text"> 
 
      <p>There is some text here</p> 
 
      <p>There is also some other text here</p> 
 
      <p>Finally there is some text here</p> 
 
      <p>Finally there is some text here</p> 
 
      <p>Finally there is some text here</p> 
 
     </div> 
 
    </div> 
 
</div>

我希望它也可以幫助你:)