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

Question

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

代码笔 link :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 个小时...请帮忙！

Answer 1

删除

inline-block

来自

.footer .part{

它应该可以工作

Answer 2

我想我明白了，我修改了 3 css 类:

.footer{
     /*display: table;*/
     text-align: center;
     margin:20vh 0vw 0 0 ;
     padding:0 0 0 0;
     background: #222222;
     height: 300px
}
.footer .part{ 
     height: 40vh;
     border-left: 1px solid #353535;
     /*display: inline-block;*/
     width:20vw;
     /*display:table-cell; vertical-*/
     display: inline-block;
     align:top;
}

.Title_of_departments{
     display:block;
     font-family: "Sofachrome" !important;
     font-size: 20px;
     /*padding:20vh 0vh 5vh 0vh;*/
     text-align: center;
     color: #E50000;
  }

https://codepen.io/lolpez/pen/zyWoxL

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

cannot align text next to image with proper intent

html

css

web-frontend