Question

我正在开发一个自助站点，现在正处于我试图在左侧创建文本并在右侧创建图像的部分。我得到了所有这一切，但我很难将图像垂直居中。我正在弄乱填充物和边距，但它一直在变得时髦。

这是我正在做的事情的图像：

以下是此部分的代码：

HTML

    <!-- Section 1 -->
<div class="cssSection cssCenter">
    <div class="container">

        <div class="row">
            <div class="col-sm-7">
                <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
            </div>

            <div class="col-sm-5">
                    <img class="img-center img-responsive" src="http://placehold.it/300x300">
            </div>
        </div>

    </div>
</div>

CSS

.cssCenter {
    text-align: center;
}

.cssSection {
    padding: 120px 0 70px;
}

.cssInformation {
    font-size: 18px;
}

.img-center {
    margin: auto;
}

有谁能帮我理解如何以正确的方式将图像与左边的文字对齐？非常感谢。

先谢谢

Answer 1

试试这个，请告诉我你的反馈意见！

使用像这样的弹性箱：

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

对于响应性要求，我有这个：

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}

.cssCenter {
    text-align: center;
}

.cssSection {
    padding: 120px 0 70px;
}

.cssSection .row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
}

.cssInformation {
    font-size: 18px;
}

.img-center {
    margin: auto;
}

@media only screen and (max-width: 650px) {

   .cssSection .row {
      flex-direction: column;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<!-- Section 1 -->
<div class="cssSection cssCenter">
    <div class="container">

        <div class="row">
            <div class="col-sm-7">
                <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p>
            </div>

            <div class="col-sm-5">
                    <img class="img-center img-responsive" src="http://placehold.it/300x300">
            </div>
        </div>

    </div>
</div>
  </body>

如何使用引导程序将图像和文本保持垂直居中？

1 个答案: