我怎样才能把特色图片拉低一点？答案

【问题标题】：How can I bring down the featured image a little?我怎样才能把特色图片拉低一点？
【发布时间】：2020-04-23 01:33:46
【问题描述】：

我怎样才能将特色图片拉低一点，使其与标题对齐？这是网页AnyGeeks

这是设置图像的代码。

<div class="container">
<div class="jumbotron jumbotron-fluid mb-3 pl-0 pt-0 pb-0 bg-white position-relative">
    <div class="h-100 tofront">
        <div class="row justify-content-between">
            <div class="col-md-6 pt-6 pb-6 pr-6 align-self-center">
                <p class="text-uppercase font-weight-bold">
                    <a class="text-danger" href="./category.html">{% block category %}{% endblock %}</a>
                </p>
                <h1 class="display-4 secondfont mb-3 font-weight-bold">{% block ptitle %} {% endblock %}</h1>
                <p class="mb-3">
                    {% block desc %} {% endblock %}
                </p>
                <div class="d-flex align-items-center">
                    <img class="rounded-circle" src="{{url_for('static',filename='img/avatar.jpeg')}}" width="70">
                    <small class="ml-2">RahulVk<span class="text-muted d-block">{% block dtt %}{% endblock %}read</span>
                    </small>
                </div>
            </div>
            <div class="col-md-6 pr-0">
                <img src="{% block featuredImage %}{% endblock %}">
            </div>
        </div>
    </div>
</div>

我使用烧瓶作为后端。这就是标签存在的原因。

【问题讨论】：

标签： html css flask bootstrap-4 web-deployment

【解决方案1】：

我建议你在你的 div 中添加显示 flex，并对齐项目中心：

<div class="col-md-6 pr-0 d-flex align-items-center">
     <img src="{% block featuredImage %}{% endblock %}">
</div>

或者您可以添加一些填充顶部：

<div class="col-md-6 pr-0 pt-4">
     <img src="{% block featuredImage %}{% endblock %}">
</div>

【讨论】：

【解决方案2】：

我建议您在 .row 课程中添加 align-items-center 课程。就像 @flpfar 建议的那样，您可以添加 col-md-6 类，它会 100% 工作，但不是一蹴而就。

<div class="row justify-content-between align-items-center"></div>

【讨论】：