垂直引导面板标题

Question

我有一个引导面板，将标题移到了左侧。我正在努力使文本垂直（旋转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>

我尝试了所有我知道的对齐属性（文本对齐，对齐内容等），但是它们似乎并没有按照我的预期调整div中的内容。

如何在将图标保持在文本左侧的同时将内容对齐到中间？

（JS小提琴：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

让我知道这是否对您有帮助。

Answer 2

使用flex的另一种解决方案并未考虑标题框中不同的长度。如果您想要一个即使标题长度不同也能使所有内容正确居中的解决方案，那么您想使用绝对定位。

下面的代码和示例在页面上显示3个标题框，所有标题框均具有不同的标题长度。但是，标题应保持在左侧标题框架的完美中心位置。

---

将.panel-leftheading调整为

  position: absolute;
  top: 0; //stick to the top
  left: 0; //stick to the left
  height: 100%; //have a height equal 100% of the parent div
  width: 42px; //be 42px wide

这可以确保您的标题面板始终位于左侧，始终位于父级的100％高度，并为我们提供了一个很好的容器来执行绝对居中的技巧。

将.panel-lefttitle更新为：

position: absolute; //absolute position for the child
left: 50%; //move left half width of the parent div
top: 50%; //move top half width of the parent div
transform: rotate(-90deg) translate(-50%, -50%); //rotate the child 90 degrees, as well as translate the container -50% of it's own width to the left, and top.
transform-origin: left top;

现在，这让人一头雾水，但我将带您逐步了解。

left: 50%;和top: 50%都分别从左侧和顶部向子元素移动父元素宽度的50％。因此这意味着我们的子元素将在容器元素的确切中心具有一个角。

然后我们要将该元素移动其自身宽度的50％，并将其自身高度的50％从刚刚移动的位置移回，因为这将使子元素的中心 元素放在容器元素的中心。

我们可以通过将translate(-50%, -50%)添加到您的转换中来实现。 transform: translate指定百分比时，将根据元素自身的大小移动元素。

即使我们在容器div上旋转了90度，这也会正确地使子div在容器div中居中。即使每个CSS的文本长度略有不同，也允许单个CSS处理多个CSS。

这是一个带有工作示例的小提琴：http://jsfiddle.net/bke20hyg/

Answer 3

我希望这会帮助您调整

.panel-default>.panel-leftheading {
    height: 100%;
    position: absolute;
}
.panel-lefttitle{
    position: absolute;
    bottom: 1em;
}
.titleWrapper center i{
        position: absolute;
    left: -1.1em;
    top: 0.2em;
    font-size:1.5em;

}