Question

我正在尝试创建带有垂直标题的可隐藏侧栏。

隐藏侧边栏时，仅其标题应该可见。

通常，下面的代码有效，但是我不知道如何在sidebar_title元素内居中sidebar_header。

对于水平文本，我会在text-align: center上使用sidebar_header，但这似乎在这里不起作用。

有人可以建议吗？

function main() {
            
                let hide_button = document.getElementById('hide_sidebar'),
                     unhide_button = document.getElementById('unhide_sidebar')
                     sidebar = document.getElementById('sidebar')
                     sidebar_contents = document.getElementById('sidebar_contents')
                     sidebar_header = document.getElementById('sidebar_header')
                
                hide_button.addEventListener('click', hide_sidebar)
                unhide_button.addEventListener('click', unhide_sidebar)
                
                function hide_sidebar() {
                    sidebar_contents.style.display = 'none'  
                    sidebar.style.width = sidebar_header.offsetWidth + "px"
                    sidebar_header.style.width = "100%"
                }
                
                function unhide_sidebar() {
                    sidebar_contents.style.display = 'block'
                    sidebar.style.width = "20%"
                    sidebar_header.style.width = "30%"
                }
                
            }
            
            main()

        #horizontal_panel {
            height: 300px;
            background-color: powderblue;
        }
        #sidebar {
            width: 20%;
            height: 100%;
            background-color: green;
            float: right;
        }
        #sidebar_header {
            background-color: red;
            width: 30%;
            height: 100%;
            float: left;
            text-align: center;
         }
        #sidebar_title {
            transform: rotate(-90deg);
            //margin-top: 400%;
        }
        #sidebar_contents {
            background-color: yellow;
            width: 70%;
            height: 100%;
            float: left;
        }

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <p>
            <button id="hide_sidebar">Hide sidebar</button>
            <button id="unhide_sidebar">Unhide sidebar</button>
        </p>
        <div id="horizontal_panel">
            <div id="sidebar">
                <div id="sidebar_header">
                    <div id="sidebar_title">sidebar title</div>
                </div>
                <div id="sidebar_contents">sidebar contents</div>
            </div>
        </div>
    </body>
</html>

Answer 1

只需将此CSS应用于sidebar_header

display: flex;
align-items: center;

Answer 2

一种方法是将父级潜水设置为

display:table

然后设置标题div

display: table-cell;
   vertical-align: middle;

但是还有其他方法，我希望此链接对您有所帮助：vertical aligning text

Answer 3

我建议您研究writing-mode，它将使您的生活更加简单。

function main() {

  let hide_button = document.getElementById('hide_sidebar'),
    unhide_button = document.getElementById('unhide_sidebar')
  sidebar = document.getElementById('sidebar')
  sidebar_contents = document.getElementById('sidebar_contents')
  sidebar_header = document.getElementById('sidebar_header')

  hide_button.addEventListener('click', hide_sidebar)
  unhide_button.addEventListener('click', unhide_sidebar)

  function hide_sidebar() {
    sidebar_contents.style.display = 'none'
    sidebar.style.width = sidebar_header.offsetWidth + "px"
    sidebar_header.style.width = "100%"
  }

  function unhide_sidebar() {
    sidebar_contents.style.display = 'block'
    sidebar.style.width = "20%"
    sidebar_header.style.width = "30%"
  }

}

main()

#horizontal_panel {
  height: 300px;
  background-color: powderblue;
}

#sidebar {
  width: 20%;
  height: 100%;
  background-color: green;
  float: right;
}

#sidebar_header {
  background-color: red;
  width: 30%;
  height: 100%;
  float: left;
  text-align: center;
}

#sidebar_title {
  transform: rotate(-180deg);
  writing-mode: tb;
  height:100%;
}

#sidebar_contents {
  background-color: yellow;
  width: 70%;
  height: 100%;
  float: left;
}

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <p>
    <button id="hide_sidebar">Hide sidebar</button>
    <button id="unhide_sidebar">Unhide sidebar</button>
  </p>
  <div id="horizontal_panel">
    <div id="sidebar">
      <div id="sidebar_header">
        <div id="sidebar_title">sidebar title</div>
      </div>
      <div id="sidebar_contents">sidebar contents</div>
    </div>
  </div>
</body>

</html>

Answer 4

另一种正确放置它的方法是使用...位置。在CSS代码段中检查/* ADDED THIS CSS */。如果您想防止文本中出现换行，只需在white-space: nowrap;上使用#sidebar_title

function main() {

  let hide_button = document.getElementById('hide_sidebar'),
    unhide_button = document.getElementById('unhide_sidebar')
  sidebar = document.getElementById('sidebar')
  sidebar_contents = document.getElementById('sidebar_contents')
  sidebar_header = document.getElementById('sidebar_header')

  hide_button.addEventListener('click', hide_sidebar)
  unhide_button.addEventListener('click', unhide_sidebar)

  function hide_sidebar() {
    sidebar_contents.style.display = 'none'
    sidebar.style.width = sidebar_header.offsetWidth + "px"
    sidebar_header.style.width = "100%"
  }

  function unhide_sidebar() {
    sidebar_contents.style.display = 'block'
    sidebar.style.width = "20%"
    sidebar_header.style.width = "30%"
  }

}

main()

#horizontal_panel {
  height: 300px;
  background-color: powderblue;
}

#sidebar {
  width: 20%;
  height: 100%;
  background-color: green;
  float: right;
}

#sidebar_header {
  background-color: red;
  width: 30%;
  height: 100%;
  float: left;
  text-align: center;
}

#sidebar_title {
  transform: rotate(-90deg);
  //margin-top: 400%;
}

#sidebar_contents {
  background-color: yellow;
  width: 70%;
  height: 100%;
  float: left;
}

/* ADDED THIS CSS */
#sidebar_header {
    position: relative;
}
#sidebar_title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    position: absolute;
}

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <p>
    <button id="hide_sidebar">Hide sidebar</button>
    <button id="unhide_sidebar">Unhide sidebar</button>
  </p>
  <div id="horizontal_panel">
    <div id="sidebar">
      <div id="sidebar_header">
        <div id="sidebar_title">sidebar title</div>
      </div>
      <div id="sidebar_contents">sidebar contents</div>
    </div>
  </div>
</body>

</html>

在div中居中放置垂直文本？

4 个答案: