What is the best way to vertically align a label at a 270-degree angle?

I am trying to position text vertically at 270 degrees and in the middle of an image. This is my goal.

Despite attempting to use the CSS 'transform' property, I have been unsuccessful. You can view the code I tried here. Below is the HTML and CSS code I used:

HTML :

<div id="img-container">
        <label id="lblConfidence">Confidence</label>
        <label id="lblHigh">High</label>
        <div id="image"></div>
        <label id="lblLow">Low</label>
 </div>

CSS :

#img-container{
    margin: 0 auto;
    padding:0;
}
#image{
    border:5px solid red;
    margin-left:50px;
    width:10px;
    height:100px;
}
#lblConfidence{
    vertical-align:middle;
    transform:rotate(270deg) ;
    -ms-transform:rotate(270deg) ; /* IE 9 */
    -transform:rotate(270deg) ; /* Opera, Chrome, and Safari */
}
#lblLow{
    margin-left:48px;
}
#lblHigh{
    margin-left:48px;
}
htmlcss

Answer №1

A unique solution utilizing pseudo-elements with minimal markup can be found here: http://jsfiddle.net/C49q7/1/. The focus was on precise alignment of elements, allowing the #image element to be positioned anywhere desired while the labels maintain their positioning.

HTML:

<div id="image"><span></span></div>

CSS:

#image {
    border:5px solid red;
    width:100px;
    height:20px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-top: 100px;
}

#image:before {
    content: "Conidence";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    text-align: center;
}

#image > span:before {
    content: "High";
    position: absolute;
    right: -25px;
    font-size: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

#image > span:after {
    content: "Low";
    position: absolute;
    left: -25px;
    font-size: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

Answer №2

  1. Customize the container with CSS.

    #img-container { 
    position: relative; 
}

  2. Style the label using CSS.

    #lblConfidence { 
    position: absolute; 
    top: 50%; -moz-transform: 
    rotate(270deg); 
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
}

The current style aligns the label to 50%, but for dynamic labels, consider using JavaScript to adjust the "top: 50%" style based on the label's length.

Answer №3

Kindly swap out lable with div and apply the following CSS for lblConfidence:

#lblConfidence
{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
writing-mode: tb-rl; /* IE 8 */
filter: flipv fliph; /* IE 8 */
margin-top: 100px;
width: 200px;
text-align: center;
height: 50px;
background:#ccc;
}

Answer №4

check out the solution here: http://jsbin.com/joqofu/3

  <div class="container">
       <div class="left"><label>Confidence</label></div>
       <div class="right">
      <label id="lblHigh">High</label>
      <div id="image"></div>
      <label id="lblLow">Low</label>
       </div>
      </div>

also include this CSS code

.container{
  position:relative;
}

#image{
    border:5px solid red;
    width:10px;
    height:100px;

}


    .left {
      position:absolute;
      top: 0; 
      left: 0; 
      bottom: 0; 
      right: 0;
      display:block;
      height:120px;
      width:100px;
      text-align:left;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    }
    .right{
      margin-left:10px;
      float:left;
      text-align:left;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying the Placeholder Color in a Material UI Autocomplete: Tips and Tricks

In my team, we are working on two projects that both utilize an internal library with a header containing a search box. In one project, the placeholder text "Search" displays normally. https://i.stack.imgur.com/lhL5V.png However, in the second project wh ...

htmlcssreactjsmaterial-ui

angular - apply custom background styles without resorting to disabling ViewEncapsulation

I can't seem to figure out why I'm struggling to set the background of my component correctly without having to use ViewEncapsulation.None. Currently, with ViewEncapsulation.None, my styles look like this: * { margin: 0; padding: 0; ...

cssangular

Access the value of a variable passed from the view to the controller

Is there a way to retrieve a dynamically generated value from the view to the controller in AngularJS? <ng-option ng-repeat="w in details track by $index"> <div class="program-grid-row table-row" > <div> <a class= ...

javascripthtmlangularjs

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...

javascriptcssstylesmaterial-ui

I plan to compile a collection of names in a text field and then have the ability to select and access each name individually with just a click

I am currently working on a project that involves creating an admin site using Firebase. One of the main features of the site is large text fields that display information which can be modified. For instance, the user management page includes text fields ...

javascripthtmlcssfirebasetextfield

Pressing the dart key will alter the sprite's direction in a 2D game

Recently, I've been working on a Dart game where the user controls a space ship sprite using the W, A, S, and D keys. Pressing these keys will move the sprite up, left, right, and down respectively. Additionally, pressing the Space bar will launch a p ...

htmldartgame-development

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

When the width of the element is set to 100vw, it disrupts the

I'm attempting to expand a sticky element to fit the size of the screen. Here is the HTML code I am using: .large { height: 200vw; width: 200vw; } .header { left: 0; top: 0; color:white; position: sticky; width: 100px; height: 10 ...

htmlcss

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

javascripthtmlcss

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?

I am facing a challenge with my webpage layout. I have a fixed-top navbar at the top, followed by 3 sections. The second section contains nav-tabs. What I want is for the nav-tabs navbar to stick to the top of the page below the fixed-top navbar when the u ...

javascripthtmljquerycssbootstrap-5

Is it possible to update only the inner text of all elements throughout a webpage?

Scenario After coming across a thought-provoking XKCD comic, I decided to craft a script that would bring the comic's concept to life: javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+ ...

javascripthtmlinnerhtmlinnertext

Making the toggle button functional on the navbar

Trying to customize my navbar for tablet and mobile devices is proving to be a challenge. I am looking for a way to make the dropdown button take up the entire page when clicked on. It seems like JavaScript might be the solution, but I'm not quite sur ...

javascriptcssbootstrap-4navbar

CSS - Overlapping elements on smaller screens due to being stacked

I am encountering an issue with a column of elements stacked below each other in my code. Here is a simplified version of my implementation: <div style="position: relative; height: 100%;"> <div style="position: absolute;">Really long text h ...

htmlcsstextoverflow

How can I use Angular to automatically check a checkbox while a page is loading?

I have a list of checkboxes, and based on the selected checkbox, offers are displayed. Everything is working fine as expected. Below is the code snippet I have implemented: function Test1Controller($scope) { var serverData = ["Samsung Galaxy Note ...

javascriptjqueryhtmlangularjscheckbox

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

javascriptjqueryhtmlcss

What should I designate as the selector when customizing dialog boxes?

I am attempting to change the title bar color of a dialog box in CSS, but I am running into issues. Below is the HTML code for the dialog box and the corresponding CSS. <div id="picture1Dialog" title = "Title"> <p id="picture1Text"> ...

javascriptjqueryhtmlcss

The dynamic combination of jCarousel, jQuery Accordion, and fade in effects

Take a look at this link www.aboud-creative.com/demos/mckinley3. You'll find a jQuery Accordion with jCarousel inside the "Developments" section. I have implemented a standard fadeIn function for the logo, accordion, and a stag on the bottom right to ...

javascriptjqueryhtmlcssjcarousel

Two separate tables displaying unique AJAX JSON response datasets

As a beginner in javascript, I am facing a challenge. I want to fetch JSON responses from 2 separate AJAX requests and create 2 different tables. Currently, I have successfully achieved this for one JSON response and table. In my HTML, I have the followi ...

javascriptjqueryhtmljsonajax

What are the risks of using react + bootstrap without importing bootstrap.js?

When bootstrap library is used along with React, potential unpredictable behavior and difficult bugs may arise due to DOM modifications. Is it feasible to use bootstrap without including bootstrap.js? What are the drawbacks? While I am aware of the ' ...

javascriptcsstwitter-bootstrapreactjsreact-bootstrap

What is the best way to add multiple values to a single column but on separate rows?

Attempting to save the question and answer separately in different tables. Successfully stored the question text value, but encountering an error when inserting the answer value. Fatal error: Uncaught exception 'PDOException' with message ...

phphtmlmysql