垂直自举面板标题

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> 

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

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

（JS小提琴： http ： //jsfiddle.net/jbk075c8/2/ ）

最终目标：

Answer 1

您应该能够使用display: flex | flex-inline的组合 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％，而它自己HIGHT从我们刚搬回的50％，因为这将把子元素的中心在容器元素的中心。

我们可以通过在translate(-50%, -50%)添加translate(-50%, -50%)来实现这一目标。 transform: translate指定百分比时的transform: translate将根据元素自身的大小移动元素。

这正确地将子div放在容器div中，即使我们正在对其进行90度旋转。 允许单个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;

}