Horizontal Alignment of DIV Tags

Question

Horizontal Alignment of DIV Tags

I'm currently working on aligning some div tags to serve as contact links on my website. My goal is for them to be positioned on the right-hand side and aligned in a single line.

Here's how they look at the moment:

https://i.sstatic.net/rQ1uG.png

Here's the preferred alignment:

https://i.sstatic.net/LbR46.png

Here's the code snippet:

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color: white;
      padding: 5px 10px;
    }
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }

<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>

html css text-alignment

Answer 1

Answer №1

Have you considered rotating the book-me div for a unique effect (use full screen on snippet below to see transform):

#book-me {
  position: fixed;
  right: 0;
  transform: rotate(90deg);
  transform-origin: top right;
  z-index: 99999;
  bottom: 0;
  background: black;
  color: white;
  padding: 5px 10px;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
}

@media screen and (max-width: 960px) {
  #book-me {
    transform: none;
  }
  #book-me a {
    padding: 5px 10px;
  }
}

<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>

Answer 2

Have you considered rotating the book-me div for a unique effect (use full screen on snippet below to see transform):

#book-me {
  position: fixed;
  right: 0;
  transform: rotate(90deg);
  transform-origin: top right;
  z-index: 99999;
  bottom: 0;
  background: black;
  color: white;
  padding: 5px 10px;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
}

@media screen and (max-width: 960px) {
  #book-me {
    transform: none;
  }
  #book-me a {
    padding: 5px 10px;
  }
}

<div id="book-me">
  <a href="tel:############">Call</a>,
  <a href="sms:############">Text</a> or
  <a href="############">WhatsApp</a>
</div>

Answer 3

Answer №2

<a> tags are specifically used for creating hyperlinks in text, and do not affect the block-level formatting of text. To achieve the desired effect, you can style them as divs instead. It seems from your screenshots that you have already implemented the rotation of text by 90 degrees elsewhere in your code.

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color:white;
      padding: 5px 10px;
    }
    
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }

<div id="book-me">
          <div><a href="tel:############">Call</a></div>, 
          <div><a href="sms:############">Text</a></div>   
          <div>or</div>
          <div><a href="############">WhatsApp</a></div>
        </div>

Answer 4

<a> tags are specifically used for creating hyperlinks in text, and do not affect the block-level formatting of text. To achieve the desired effect, you can style them as divs instead. It seems from your screenshots that you have already implemented the rotation of text by 90 degrees elsewhere in your code.

#book-me {
      position: fixed;
      right: 0;
      transform: translateY(-50%);
      z-index: 99999;
      top: 50%;
      background: black;
      color:white;
      padding: 5px 10px;
    }
    
    #book-me a {
      background: black;
      color: white;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      font-family: sofia-pro;
      writing-mode: vertical-rl;
    }
    
    @media screen and (max-width: 960px) {
      #book-me {
        bottom: 0;
        top: initial;
        transform: none;
      }
      
      #book-me a {
        writing-mode: initial;
        padding: 5px 10px;
      }
    }

<div id="book-me">
          <div><a href="tel:############">Call</a></div>, 
          <div><a href="sms:############">Text</a></div>   
          <div>or</div>
          <div><a href="############">WhatsApp</a></div>
        </div>

Answer 5

Answer №3

It seems like the code you've been working on may not be the most efficient solution. I would suggest considering rotating your box instead of trying to achieve the desired effect with this approach.

* {
  margin: 0;
  padding: 0;
}

#book-me {
  position: fixed;
  height: 100%;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

#book-me span {
  transform: translateY(calc(50vh - 50%));
  color: white;
  background: black;
  padding: 5px 10px;
  writing-mode: vertical-rl;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
  writing-mode: vertical-rl;
}

@media screen and (max-width: 960px) {
  #book-me {
    bottom: 0;
    top: initial;
    transform: none;
  }

  #book-me a {
    padding: 5px 10px;
  }
}

p {
  padding: 2em;
  font-size: 2em;
}

<div id="book-me">
  <span>
    <a href="tel:############">Call</a>,
    <a href="sms:############">Text</a> or
    <a href="############">WhatsApp</a>
  </span>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, doloremque!</p>
<p>Expedita fugit dolor amet ipsa voluptatibus, nesciunt eos beatae voluptas.</p>
<p>Vitae sapiente, nihil ea quam, asperiores error aliquam? Mollitia, nobis?</p>
<p>Veniam suscipit explicabo ipsum nobis hic sunt, ea laboriosam obcaecati!</p>
<p>Sunt explicabo consectetur eius ipsam maiores laborum inventore excepturi temporibus?</p>
<p>Blanditiis nulla tenetur, cum, placeat fuga sint sed itaque debitis.</p>
<p>Fugit nobis fuga sit, repellat quae doloremque, dolorum obcaecati suscipit!</p>
<p>Voluptas officiis veritatis excepturi possimus modi eum corporis, ducimus earum!</p>
<p>Dolorem expedita quae, numquam consequatur maiores veniam iure? Minus, quia?</p>
<p>Deserunt fugiat odit repellat impedit perferendis, minus minima. Facere, quidem.</p>

Answer 6

It seems like the code you've been working on may not be the most efficient solution. I would suggest considering rotating your box instead of trying to achieve the desired effect with this approach.

* {
  margin: 0;
  padding: 0;
}

#book-me {
  position: fixed;
  height: 100%;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

#book-me span {
  transform: translateY(calc(50vh - 50%));
  color: white;
  background: black;
  padding: 5px 10px;
  writing-mode: vertical-rl;
}

#book-me a {
  background: black;
  color: white;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sofia-pro;
  writing-mode: vertical-rl;
}

@media screen and (max-width: 960px) {
  #book-me {
    bottom: 0;
    top: initial;
    transform: none;
  }

  #book-me a {
    padding: 5px 10px;
  }
}

p {
  padding: 2em;
  font-size: 2em;
}

<div id="book-me">
  <span>
    <a href="tel:############">Call</a>,
    <a href="sms:############">Text</a> or
    <a href="############">WhatsApp</a>
  </span>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, doloremque!</p>
<p>Expedita fugit dolor amet ipsa voluptatibus, nesciunt eos beatae voluptas.</p>
<p>Vitae sapiente, nihil ea quam, asperiores error aliquam? Mollitia, nobis?</p>
<p>Veniam suscipit explicabo ipsum nobis hic sunt, ea laboriosam obcaecati!</p>
<p>Sunt explicabo consectetur eius ipsam maiores laborum inventore excepturi temporibus?</p>
<p>Blanditiis nulla tenetur, cum, placeat fuga sint sed itaque debitis.</p>
<p>Fugit nobis fuga sit, repellat quae doloremque, dolorum obcaecati suscipit!</p>
<p>Voluptas officiis veritatis excepturi possimus modi eum corporis, ducimus earum!</p>
<p>Dolorem expedita quae, numquam consequatur maiores veniam iure? Minus, quia?</p>
<p>Deserunt fugiat odit repellat impedit perferendis, minus minima. Facere, quidem.</p>

Horizontal Alignment of DIV Tags

Answer №1

Answer №2

Answer №3

Similar questions

The buttons are not resizing to fit the entire table cell

Tips for generating a .csv document using data from an array?

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Adjust div elements to fit the size of the window

Eliminate HTML nodes that are not currently visible

Executing a JQuery function when the webpage is loaded

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

Distinguishing background colors depending on the browser's compatibility with CSS properties

Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Turn off the Antd Datepicker tooltip

Learn the steps to successfully rotate the custom icon in Material-Ui select without impacting its functionality and making sure it remains clickable

The CSS selector "not:nth-child" is failing to function properly within the template

Python code encountered an issue while trying to find the element with the locator //input[@name="session[username_or_email]". The element could not

Configuring the interactive background for a textbox

Top tip for combating form misuse in Django applications

Error: Issue with parsing integer in JavaScript

Exploring the elimination of box shadow on elements that overlap

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

Which property within the <mat-option> element is used for toggling checkboxes on and off?

Is it possible to make the dashboard reach 100% height?