не может выровнять текст рядом с изображением с правильным намерением - PullRequest
0 голосов
/ 04 января 2019

Здравствуйте, я пытаюсь сделать нижний колонтитул с изображением, поэтому я не могу правильно настроить свою веб-страницу, пожалуйста, помогите ... Я хочу добиться чего-то вроде этого: *

Ссылка 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 часов ... Пожалуйста, помогите!

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Я думаю, что получил, я модификатор 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

0 голосов
/ 04 января 2019

удалить

inline-block 

от

.footer .part{

и должно работать

...