CODEWITHSUNDEEP
css
barciewicz
barciewicz

Reputation: 3773

Center vertical text inside a div?

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>

Upvotes: 0

Views: 73

Answers (4)

JRoss
JRoss

Reputation: 1395

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>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 0

Chip
Chip

Reputation: 129

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

Upvotes: 0

Rannie Aguilar Peralta
Rannie Aguilar Peralta

Reputation: 1742

Just apply this CSS to sidebar_header

display: flex;
align-items: center;

Upvotes: 1

Related Questions