How to properly center vertical text

Question

For the whole day, I have read pretty much all I can on the subject of vertical text and for the life of me I cannot find a solution to what I believe should be ridiculously easy to do. I have a header. In it, there are three items that must line up horizontally side by side. First is a picture, second could be anything really but its size must be 20 X 150 (WxH) (or fit within that size)and then another picture. Here is what I have:

    #maincontainer{
    width: 1020px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #header{
    height: 150px; /*Height of top section*/
    float: left;
    }

    #box{
     width: 20px;
     height: 150px;
     border: 1px solid red;
    }

    .verticaltext{
        font-size: 0.600em;
     text-align: center;    
        border: 1px solid red;
        transform: rotate(-90deg) translate(-100%, 0);
        transform-origin: 0 0;
    }

 <body>
  <div id="maincontainer">
   <div id="header">
    <div>
     <img src="image/left_pic.jpg" alt="left_pic" height=150 width=250>
     <div id="box">
      <p class="verticaltext">vertical text</p>      
        </div>
        <img src="image/right_picture.jpg"     alt="right_pic" height=150 width=748>     
       </div>
         </div>
        </div>
    </body>

This should produce three simple items side by side in a header container. Now it's all over the place - not even on the same line! (I don't need the red box but it's there to let me know how far off I am of what I really need - second pic is set at 748 to account for that border). I am baffled at how such a seemingly easy thing to do is difficult to achieve. Anyhow can sort me out?

Why do you make `#header` `float: left;`? If at all, I imagine your images and `#box` would float left. — connexo, Dec 03 '16 at 04:34

Matt Picca · Accepted Answer · 2016-12-03T05:50:27.170

    #maincontainer{

    width: 1020px; /*Width of main container*/
    height: 700px;
    margin: 0 auto; /*Center container on page*/
    }

    #header{
    width: 1000px;
    min-height: 150px; /*Height of top section*/
    float: left;
    }

    .box{
     width: 250px;
     height: 150px;
     border: 1px solid red;
        float:left;
        margin-left:10x;
    }

    .verticaltext{
        font-size: 16px;
        float:left;
        margin-left: 10px;
        margin-right: 10px;
        vertical-align:middle;
        line-height:150px;
        transform:rotate(270deg);
    }

 <body>
  <div id="maincontainer">
   <div id="header">
    <div class="box">
       <img src="image/left_pic.jpg" alt="left_pic" height="150px" width="250px" />
    </div> 
    <div class="verticaltext">
     Vertical text 
       </div>
       <div class="box">
                   <img src="image/right_picture.jpg" alt="right_pic" height="150px" width="748px">      
       </div>
         </div>
        </div>
    </body>

There where alot of errors in your code, I think this is what you wanted correct? if so let me know and ill explain all the errors you had

Hi, I was about to dismiss this solution because both boxes where small (250-250) vs (250-750) but I played with it and I got it to work. That said, the margins must be removed from the box class. And more importantly, the verticaltext class MUST have: (1) white-space:nowrap, (2) a specified width of 20px and (3) a transform: translate(-100%,0). Since your version (plus my add-ons) seems less hacky than my own solution, I will accept yours as the true solution. — Eric, Dec 03 '16 at 08:24

score 0 · Answer 2 · answered Dec 03 '16 at 03:39

0

Your css code could be like this

    #header img.img-left {
    position: absolute;
    float: left;
    top:0;
}

#box p {
    position: absolute;
    left: 25%;
}


#header img.img-right {
    position: absolute;
    right: 0;
    top: 0;
}

answered Dec 03 '16 at 03:39

Amr Aly

3,871
2
16
33

score 0 · Answer 3 · answered Dec 03 '16 at 04:30

Have you considered using flex box? It seems that may be a very simple solution to what you're trying to do.

.header {
    display:flex;
    align-items: center;
 }

This is untested but basically all the items inside header should be centered vertically. I would read up on flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 0 · Answer 4 · answered Dec 03 '16 at 05:37

Ok. I knew this had to be easy to do but I guess I just had to calm down, vent the frustration and think this through. So, here goes for those who might have the same problem. I floated everything to the left in the order it appears in the html (easiest possible case). To fix the alignement, I needed a position:relative on the header container (because the page is centered on the viewport). For the vertical text, see the css of verticaltext class and verticaltext id - height and width have been interchanged. Somehow, both sets of dimension are required. Line-height equal to the width will insure it is centered. white-space:nowrap was also important (of course ensure your text fits in the space you have).

Here is the revised code:

<!DOCTYPE html>
<html>
<head>
    <title>Homepage</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <link href="css/mycss.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="maincontainer">
        <div id="header">               
            <div>
                <img src="image/left_pic.jpg" alt="left_pic" height=150 width=260>
            </div>
            <div id="verticaltext">                 
                <p class="verticaltext">vertical text</p>
            </div>              
            <div>
                <img src="image/right_pic.jpg" alt="right_pic" height=150 width=740>
            </div>
        </div>
    </div>
</body>
<html>

And here is the CSS:

#maincontainer{
width: 1020px; 
margin: 0 auto; /*Center container on page*/
}

#header{
    position: relative;
    height: 150px; 
    width: 100%;
}

#header >div{
    float: left;
}

#verticaltext{
    width: 20px;
    height: 150px;
}

.verticaltext{
    font-size: 0.600em;
    line-height: 20px;
    padding: 0;
    margin: 0;
    height: 20px;
    width: 150px;
    white-space: nowrap;
    text-align: center;    
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
}

Thank you to all who took the time to read this and venture an answer. Much appreciated. E L

score 0 · Answer 5 · answered Dec 03 '16 at 05:38

According to your post i understood that you want to have your header items horizontally side by side all these have to be at center.

You can use display:flex and margin:0 auto on the maincontainer to center the content

check this snippet

#maincontainer {
  width: 1020px;
  margin: 0 auto;
  /*Width of main container*/
  /*Center container on page*/
}
#header {
  display: flex;
  height: 150px;
  /*Height of top section*/
}
#box {
  width: 20px;
  height: 150px;
  border: 1px solid red;
}
.verticaltext {
  font-size: 0.600em;
  text-align: center;
  border: 1px solid red;
  transform: rotate(-90deg) translate(-100%, 0);
  transform-origin: 0 0;
}

<body>
  <div id="maincontainer">
    <div id="header">

      <img src="image/left_pic.jpg" alt="left_pic" height=150 width=250>
      <div id="box">
        <p class="verticaltext">vertical text</p>
      </div>
      <img src="image/right_picture.jpg" alt="right_pic" height=150 width=748>

    </div>
  </div>
</body>

Hope it helps

How to properly center vertical text

5 Answers5