html - 垂直 Bootstrap 面板标题

Question

我有一个 Bootstrap 面板，我已将标题移到左侧。我正在努力使文本垂直(旋转 90 度)。

大部分时间我都有这个，但我在让其他东西与 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;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div class="container">
  <br />
  <div class="row">

    <div class="col-md-12">

      <div class="panel panel-default">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle">
            <span class="titleWrapper">
                <center>
                <i class="fa fa-user"></i>
              <span class="mainTitle">
                Main Title Here
              </span>
            <br>
            <span class="subTitle">
                (Sub Title)
              </span>
            </center>
            </span>
          </h3>
        </div>
        <div class="panel-rightbody">
          <p>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.</p>

          <p>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
          </p>

        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>

我尝试了所有我知道的对齐属性(text-align、align-content 等)，但它们似乎没有像我预期的那样调整 div 中的内容。

如何将内容居中对齐，同时让图标保持在文本左侧？

(JS fiddle :http://jsfiddle.net/jbk075c8/2/)

最终目标:

Answer 1

您应该能够使用 display: flex | 的组合flex-inline 和 float 让它工作。这是一个例子:

.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%;
  display: inline-flex;
}

.panel-lefttitle {
  margin-top: 150px;
  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-lefttitle i {
  margin-bottom: 20px;
  margin-right: 10px;
}

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

.mainTitle {
  display: block;
  font-style: bold;
  font-size: 14px;
}

.subTitle {
  font-style: italic;
}

.titleWrapper {
  text-align: center;
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div class="container">
  <br />
  <div class="row">

    <div class="col-md-12">

      <div class="panel panel-default">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle text-center">
            <i class="fa fa-user pull-left"></i>
            <span class="titleWrapper">
          <span class="mainTitle">
            Main Title Here
          </span>
            <span class="subTitle">
            (Sub Title)
          </span>
            </span>
          </h3>
        </div>
        <div class="panel-rightbody">
          <p>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.</p>

          <p>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
          </p>

        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>

JS Fiddle Link

如果这对您有帮助，请告诉我。