Вертикальный заголовок панели начальной загрузки

У меня есть панель начальной загрузки, которую я переместил в левую сторону. Я работаю над тем, чтобы текст был вертикальным (повернут на 90 градусов).

У меня это по большей части, но у меня есть некоторые проблемы с приведением других вещей в соответствие с CSS.

Моя конечная цель заключается в том, чтобы значок располагался перед заголовком/подзаголовком, все находилось по центру заголовка панели, а подзаголовок располагался под заголовком.

CSS:

.panel {
  position: relative;
}

.panel-default>.panel-leftheading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-primary>.panel-leftheading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

.panel-success>.panel-leftheading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-info>.panel-leftheading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-warning>.panel-leftheading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.panel-danger>.panel-leftheading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panel-leftheading {
  width: 42px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 8px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  float: left;
  height: 100%;
}

.panel-lefttitle {
  margin-top: 110px;
  margin-bottom: 0;
  font-size: 12px;
  color: inherit;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left top;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: left top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: left top;
  -o-transform: rotate(-90deg);
  -o-transform-origin: left top;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

.panel-rightbody {
  margin-left: 50px;
  height: 100%;
}


.mainTitle {

  font-style: bold;
  font-size: 14px;
}

.subTitle {
  font-style: italic;
}

<�Сильный> HTML:

<div class="container">
  
<div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-leftheading">

        </div>
        <div class="panel-rightbody">
          
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute </div> <div class="clearfix"> </div> </div> </div>

Main Title Here
(Sub Title)

I tried all of the alignment properties I knew of (text-align, align-content etc) but they didn't seem to adjust the content within the divs as I expected.

How can I align the content to the middle while keeping the icon to the left of the text?

JS Fiddle: http://jsfiddle.net/jbk075c8/2/

End Goal:

enter image description here

0

Ответов нет

0
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)