html - 无法以正确的意图对齐图像旁边的文本

你好，我正在尝试制作一个页脚，它有一个图像，所以我无法正确地意图我的网页请帮忙...我想实现这样的事情::

CodePen 链接:https://codepen.io/Sherrinford03/pen/yGKaQb

<div class="footer">
        <div class="part">
            <div class="body_of_part">
            <img src="images/brochure.jpg" align="bottom">
            </div>
        </div>
        <div class="part">
            <div class="body_of_part">
            <span class="Title_of_departments">ADDRESS</span>
            <span class="Body_of_cap">SOMEADD</span>
            </div>
        </div>
        <div class="part">
            <div class="body_of_part">
            <span class="Title_of_departments">Contact us</span>
            <span class="Body_of_cap">
                Email<br>
                SOMEMAIL
                </span>
            </div>
        </div>
    </div>

...CSS

.footer{
    display: table;
    text-align: center;
    margin:20vh 0vw 0 0 ;
    padding:0 0 0 0;
    background: #222222;
}
.part img{
    vertical-align: middle;
  display: table-cell;
    width: 20vw;
}
.footer .part{ 
    height: 40vh;
    border-left: 1px solid #353535;
    display: inline-block;
    width:20vw;
}
.part .Body_of_cap{
    font-size: 18px;
}

你能帮帮我吗!我一直在寻找解决方案大约 2 个小时......请帮忙!

最佳答案

删除