使用display：block时图片消失;但不显示：block-inline;

Question

Django＆amp; amp;的新手前端开发。尝试使用CSS上的treehouse教程。它由基本模板，treehouse.html和about.html组成。我正在扩展基本模板，所以about.html看起来像这样：

{% extends "treehouse.html" %}


<!-- Change which item in the menubar is selected. -->
{% block menubar %}
    <li><a href="{% url 'basehunters.views.treehouse' %}">Portfolio</a></li>
    <li><a href="{% url 'basehunters.views.treehouse_about' %}" class="selected">About</a></li>
    <li><a href="contact.html">Contact</a></li>
{% endblock %}


<!-- Remove picture gallery from about page -->
{% block picture_gallery %}{% endblock %}


{% block vanity %}
    <section>
      <img src="{{ STATIC_URL }}img/hulk.jpg" alt="Photograph of Nick Petit" class="profile-photo">
      <h3>About</h3>
      <p>Hi, I'm Tyler</p>
    </section>
{% endblock %}

当我将display属性配置为具有块值时，图像会消失。但是，当值为内嵌块时，图像会按预期显示，但不会像我希望的那样位于中心。

.profile-photo{
    display: inline-block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 20px;  
}

当显示属性使用块值时，您知道为什么图片会消失吗？树屋教程不包括Django。我正在尝试配置Django，因为我正在完成前端开发教程。感谢您的时间。