php - 如何将多行文本与可变宽度图像居中

Question

抱歉，这可能是一个“nuby”类型的问题，

我想要一个页眉和一些段落文本，在可变宽度的图片旁边居中。为了增加乐趣，文本必须能够位于图像的左侧或右侧，但在 HTML 中它始终位于第一位。 (这样我就可以使用媒体查询将它们堆叠在移动显示器上)

我尝试了各种方法，包括使用 display:table 但如果我 float 图像，它似乎停止工作。

我可以在 Wordpress 中使用 PHP 将文本 div 的宽度设置为 ('page width' - 'the image width') 但一定有更好的方法吗？

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