如何中心對可變寬度圖像多行文本

Question

抱歉，這可能是一個有點「NUBY」類型的問題，

我想有一個頁眉和沿側可變寬度圖像中心的一些段落文本。爲了增加趣味性，文本必須能夠定位圖像的左側或右側，但在HTML中它始終是第一位。 （這是我可以使用媒體查詢將它們堆疊在移動顯示器上）

我已經嘗試了各種東西，包括使用顯示：表，但它似乎停止工作，如果我浮動圖像。

我可以在Wordpress中使用PHP將文本div的寬度設置爲（'頁面寬度' - '圖像寬度'），但是肯定有更好的方法嗎？

<!-- text left--> 
    <div class="l"> 
     <div class="td"> 
      <h2>History</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. Soluta, quia quod magnam nobis!</p> 
     </div> 
     <div class=""> 
      <img src="images/History.jpg" alt="Our History"><!-- class="img-responsive" --> 
      <div style="clear: both;"></div> 
     </div> 
    </div> 
    <!-- text right--> 
    <div class="r"> 
     <div class="td"> 
      <h2>History</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. Soluta, quia quod magnam nobis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, officiis deserunt dolor dolorem voluptas distinctio nostrum nihil natus consequatur sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique sunt doloremque fugit quidem aliquam iure dolor maiores voluptate? Similique, nesciunt, ex, unde, quos porro cum quasi facere dolorem eaque incidunt praesentium totam beatae voluptas velit voluptatum maxime officiis suscipit quis iste quisquam molestiae cumque error laudantium corporis vel et sapiente expedita adipisci accusantium doloribus. Fuga quisquam dolore officiis ipsa reprehenderit quae sapiente reiciendis! Ea, recusandae, ab, accusantium, natus eligendi officia laboriosam quo sed odit dolorem asperiores in libero placeat vitae quae. Itaque, iusto quo harum deserunt quidem laboriosam commodi dicta natus voluptate asperiores debitis tempora distinctio officia odio consectetur vero.</p> 
     </div> 
     <div class=""> 
      <img src="images/History.jpg" alt="Our History"> 
     </div> 
    </div> 

CSS：

* { 
box-sizing:border-box; 
} 

.l,.r { 
/* display: table; */ 
    width:100%; 
/* height: 421px; */ 
} 

.l .td { 
    width:38%; 
    float:left; 
    position:absolute; 
    top:50%; 
/* height: 421px; */ 
    margin-top:-100px; 
/* float:left; */ 
/* 
    display: table-cell; 
     display:table-cell!important; 
    vertical-align:middle; 
*/ 
/* float:none; */ 
} 

.l img { 
    float:right; 
    width:62%; 
} 

.r,.l { 
    position:relative; 
} 

.r .td { 
    width:38%; 
    position:absolute; 
    top:50%; 
    height:60%; 
    margin-top:-100px; 
    right:0; 
} 

.r img { 
    width:62%; 
} 

.l .td,.r .td { 
    padding-left:5%; 
    padding-right:5%; 
    max-height:100%; 
    overflow:auto; 
} 

Answer 1

希望這有助於

添加一些CSS，

.test1 txtWhiteBg col-xs-12 { 
    margin-top:-200px; //adjust to your image size 
    } 

<div class="row "> 
    <div class="test2 noLRPadding col-xs-12"> 
     <img src="images/History.jpg" alt="Our History"><!-- class="img-responsive" --> 
    </div> 
    <div class="test1 txtWhiteBg col-xs-12"> 
     <h2>History</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur a!</p> 
    </div> 
</div>