Center vertical text inside a div?

Question

I am trying to create a hideable sidebar with a vertical title.

When the sidebar is hidden, only its title should be visible.

In general, the code below works, but I don't know how to center sidebar_title inside sidebar_header element.

With horizontal text, I would use text-align: center on sidebar_header, but this does not seem to work here.

Can anyone advise?

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>

Possible duplicate of [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) — Lu Chinke, May 09 '19 at 15:26

score 1 · Answer 1 · answered May 09 '19 at 15:21

1

Just apply this CSS to sidebar_header

display: flex;
align-items: center;

answered May 09 '19 at 15:21

Rannie Aguilar Peralta

1,200
9
18

Thanks. Is there also a way to force the text not to wrap? `white-space: nowrap` will not work. – barciewicz May 09 '19 at 15:26
Sorry, but only `white-space: nowrap` is my solution for that – Rannie Aguilar Peralta May 09 '19 at 15:34

score 0 · Answer 2 · answered May 09 '19 at 15:23

0

One way is to set the parent dive to

display:table

and then have your title div

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

but there are other ways too, i hope this link is helpful : vertical aligning text

answered May 09 '19 at 15:23

Chip

119
1
10

score 0 · Answer 3 · answered May 09 '19 at 15:29

I'd recommend you look into writing-mode, it will make your life much simpler.

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>

JRoss · Answer 4 · 2019-05-09T15:35:54.127

Another way to get it positioned correctly is using... position. Check /* ADDED THIS CSS */ in CSS snippet. If you'd like to prevent the line break in the text simple use white-space: nowrap; on #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>

Center vertical text inside a div?

4 Answers4