Question 42721 in Html Question posted in
Some basic documentation can be found here.

I want one word in my title/h1 to read horizontally and the second to read vertically – Html

I am making a website and want the first word in my title/h1 tag to be read horizontally and the second word to be read vertically.

I tried using span tags in my h1 but it would only let my change the color and would not work when I used the rotate feature.

html

<h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="verticle-Tech">Tech</span>
</h1>

css

h1{
color:bisque;
text-align: center;} 

h1 span.horizontal-QuanT{
color:gray} 

h1 span.verticle-Tech{
color:white;
rotate: 90deg;}
Tags:

2

Answers


  1. 0

    Inline elements can’t be rotated, so you need to set display: inline-block; on the vertical span. Also, the correct syntax for rotating is transform: rotate(90deg);.

    h1 {
  text-align: center;
} 

h1 span.horizontal-QuanT {
  color: gray;
} 

h1 span.vertical-Tech {
  color: black;
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: bottom left;
}
    <h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="vertical-Tech">Tech</span>
</h1>
    Login or Signup to reply.
  2. 0

    Since you have really kind of gotten away from the semantic meaning of the tags I would suggest you just use three div styled as a grid and give yourself full control of the style without working around the CSS of an h1 tag.

    Feel free to change margins padding etc. to set each part where you want including the size of the header container.

    Note: I did NOT use the tags like div, span etc. in the CSS as I consider that a bad practice so you can change the element tag without also needing to change the CSS.

    .my-header-container {
  background-color: #0000FF22;
  display: grid;
  grid-template-columns: 6rem 2rem;
  grid-template-rows: 3.5em;
  font-size: 2em;
  justify-content: center;
  align-items: start;
  font-weight: bold;
  color: #F2D2BD;
}

.my-header-container .horizontal-container {
  grid-column: 1;
  color: #808080;
  display: inline-block;
}

.my-header-container .verticle-container {
  grid-column: 2;
  margin-top: 1em;
  color: #FFFFFF;
  rotate: 90deg;
}
    <div class="my-header-container">
  <div class="horizontal-container">QuanT</div>
  <div class="verticle-container">Tech</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search