如何把文字放在CSS網站頁面中間的圖像的右側？

Question

┌───────────────────────────────────────┐ 
│    <Picture><Words>   │ 
│           │ 
└───────────────────────────────────────┘ 

如上所示，我想橫放一張圖片放在網頁中間，圖片後面有一些文字。

如何設計它？

我就起草如下：

<div class="mid1"><img src="img/pic1.jpg"></div> 
<div class="mid2">Hello, how are u</div> 

Answer 1

https://jsfiddle.net/11h8gn8s/

這也是作品：

<div class="wrapper"> 
    <img src="http://placehold.it/350x150"> 
    <div class="text"> 
    <p> 
    Words 
    </p> 
    </div> 
</div> 


.wrapper { 
position: relative; 
text-align: center; 
} 

.text { 
    display: inline-block; 
    position: absolute; 
} 

Answer 2

使用flex屏幕

<div class="row"> 
    <div class="side"> 
    </div> 
    <div class="middle"> 
    <img src=""> 
    </div> 
    <div class="side"> 
    text 
    </div> 
</div> 

CSS

.row { 
    display: flex; 
    width: 100%; 
} 

.row .middle img { 
    border: 1px solid black; 
    width: 100px; 
    height: 100px; 
} 

.row .side { 
    flex: 1 0 auto; 
    padding: 0 10px; 
} 

.row .middle { 
    flex: 0 1 auto; 
} 

看到fiddle

筆記塔分t flex: 1 0 auto;意味着細胞會根據需要增長但不縮水，flex: 0 1 auto;則相反。因此，中間單元將是一樣寬，它的內容與雙方將填補其餘