Question

＆＃13;

/* Styles go here */

.floatsidebar {
  height: 100%;
  float: left;
  overflow: hidden;
  width: 30px;
  line-height: 1.5;
}

.vertical-text {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 100%) rotate(-90deg);
  transform-origin: 0 0;
  font-size: 19px;
  color: grey;
}

.vertical-text:after {
  content: "...";
  float: left;
  margin-top: 100%;
}

.sidebarmain:hover {
  background: linear-gradient(to right, white, #a6a6a6)
}

.container-design {
  min-height: 100%;
  background: white;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid grey;
}

.sidebarmain:active {
  background: linear-gradient(to right, white, #989898)
}

.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  box-sizing: border-box;
  height: 500px;
  background: linear-gradient(to right, white, lightgrey);
  border-radius: 2px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>

  <div class="floatsidebar">
    <div class="sidebarmain ui-widget-header">
      <div class="vertical-text">hello</div>
    </div>
  </div>
</body>

</html>

＆＃13;

我要做的是将div文本对齐在div的中间但没有成功。

如何将文本对齐其父div的中心？

<div class="floatsidebar">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text">hello</div>
  </div>
</div>

Answer 1

将变换更改为50％而不是100％，并添加一个可以向后移动一半宽度的跨度

/* Styles go here */


.floatsidebar {
  height: 100%;
  float: left;
  overflow: hidden;
  width: 30px;
  line-height: 1.5;
}

.vertical-text {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 50%) rotate(-90deg);  /* change this */
  transform-origin: 0 0;
  font-size: 19px;
  color: grey;
}

.vertical-text:after {
  content: "...";
  float: left;
  margin-top: 100%;
}

.vertical-text > span {                        /* add a span for true centring */
  transform: translateX(-50%);
  display: inline-block;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  padding: 0 0.5em;
  box-sizing:border-box;
}

.sidebarmain:hover {
  background: linear-gradient(to right, white, #a6a6a6)
}

.container-design {
  min-height: 100%;
  background: white;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid grey;
}

.sidebarmain:active {
  background: linear-gradient(to right, white, #989898)
}

.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  box-sizing: border-box;
  height: 500px;
  background: linear-gradient(to right, white, lightgrey);
  border-radius: 2px;
}

<div class="floatsidebar">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text"><span>a brown fox quick jump over the lazy dog a brown fox quick jump over the lazy dog</span></div>
  </div>
</div>

Answer 2

只需使用flexbox

即可

.sidebarmain {
    display: flex;
    justify-content: center;
    align-items: center;
}

如何在垂直对齐文本的div的中心对齐文本

2 个答案: