将文本居中与图像

Question

我有一个包含这些元素的网页：

我希望红色矩形的内容在绿色矩形中。 （谢谢油漆！）。所以我只想把文字与图片对齐。

我尝试了几件事，比如

margin-right : auto;
margin-left : auto;

或者我绑定使用z-index。但我找不到合适的事情。 有谁可以帮助我吗 ？

编辑1：

第一个内容的代码（文本）

.firstSection
{
    margin-left : 150px;
    margin-right : 150px;

}

图像代码

#imageMeeting
{
    margin-right : 500px;
}

编辑2：

这是我的HTML代码：

<div class="container-fluid" id="firstSection">
    <div class="row firstSection" >
        <div class="titre1 text-uppercase">Qui somme-nous ?</div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 v-align">
                <p class="sousTitre quisommesnous">Nous nous présentons en quelques mots ...</p>
                <p class="quisommesnous">Vivamus tristique ligula ut commodo finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sit amet tellus blandit, tincidunt enim eu, consectetur leo. Pellentesque tincidunt sit amet risus quis placerat. Donec hendrerit arcu at magna sodales posuere.</p>
                <p class="quisommesnous">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi imperdiet accumsan lacus, sed efficitur justo rhoncus at. Duis eu velit accumsan, eleifend dui vitae, iaculis justo.</p>
                <button class="text-uppercase btn btn-default" id="bouton">En savoir plus</button>
            </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 v-align">
            <img src="images/meeting.jpg" class="img-responsive" id="imageMeeting">
        </div>
    </div>

</div>

我更新的CSS：

.v-align
{
    vertical-align: middle;
    display: inline-block;
}

Answer 1

使用vertical-align？

body {text-align: center;}
.text-container,
.image {display: inline-block; max-width: 45%; vertical-align: middle;}

<div class="text-container">
  <h3>Hello</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quaerat, laudantium eum.</p>
</div>
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" class="image" />

预览

在 JSBin 代码中，只需替换.v-align类：

.v-align {
  vertical-align: middle;
  display: inline-block;
  float: none;
  max-width: 45%;
}

小提琴：https://jsbin.com/xoquhayuqa/1/edit

Answer 2

试试这个：

1. 将文字内容和img放在同一<div>

中

2. 为文字内容

创建另一个<div>

3. 在最后<div>

上对CSS进行v-align

应该是这样的：

HTML：

<div>
   <div id="TextContent">
     <p>Your text here</p>
   </div>
   <img src="...">
</div>

如果您正在使用Bootstrap，则可以将类.v-align添加到TextContent div。否则，您应该创建一个css类，如：

.v-align {
    vertical-align: middle;
}

并将其附加到内部<div>，如：

<div id="TextContent" class="v-align">...</div>