Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code:

<div id="slideClick">
    <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;">
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

This is the corresponding CSS:

.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}
#slideClick {
    float:left;
    height:90px;
    width:40px;
    background:#EE8D40;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    text-align: center;
}

When rendered, it looks like this:

I'm looking for a way to horizontally and vertically center the SPAN within the blue DIV. How can I achieve this?

htmlcss

Answer №1

Check out my JSFiddle that might meet your needs:

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

Take a look at this other JSFiddle I created, which could be helpful as well:

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>


.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}

#slideClick {
    float:left;
    height:190px;
    width:200px;
    background:#EE8D40;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

Answer №2

To ensure your div maintains its fixed size, you can implement a relative position for the inner span :

position:relative;
top:25px;
right:15px;

Simply adjust it as needed : http://example.com

Answer №3

In the realm of CSS, a common issue arises when trying to rotate only the text span within an element. The solution lies in rotating the wrapper element instead and then centering becomes a piece of cake.

#slideClick{
  -webkit-transform: rotate(90deg);
}

Take line-height for instance, especially when height is already defined.

Check out this demonstration on jsfiddle: http://jsfiddle.net/abc123xyz/7/

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

Does WebSVG struggle with producing sharp, defined lines in its inline format?

Upon page load, my SVG background starts as separated and then smoothly transitions into forming the background. However, I noticed that a large triangle with poor quality and choppiness appears at the beginning. What could be causing this issue? For an e ...

htmlcsssvg

Maintaining the proportions of divs containing background images

I'm dealing with a background image that features a large blue diagonal line where we want our content to align. However, I'm encountering difficulties in maintaining the alignment of the content as it resizes (resulting in the background diagon ...

htmlcsstwitter-bootstrap-3

A code to ensure input values are always set to the maximum possible value

I recently developed a script that monitors the live value property of 3 <input> elements, correcting them if the live value is outside the specified range. However, I encountered an issue where the script automatically sets the value to the max as s ...

javascripthtml

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

Issues creating bar graphs using HTML

I am currently working on creating a script that can display statistics from a database in the form of a bar chart. My idea is to have two colored bars stacked on top of each other, representing different values simultaneously - for example, the number of ...

phphtmlcharts

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

Hey there, currently creating my website and need some assistance. I'm looking to display the date and time in different sections of the page. Having some trouble with getting Indian time to work properly using PHP. If you could help me out with Ja ...

javascriptphphtml

Is it possible to serve CSS using relative paths that go beyond the URL root?

I've encountered a file path issue with my HTML and CSS files. My HTML file is located in: src/test/html/index.html And the corresponding CSS file is in: src/test/css/index.css In the HTML file, the CSS is linked using: <link rel="stylesheet" ...

htmlcssbrowsercross-browser

A method for expanding the menu upwards to make room for newly added items

Looking at the images below, I have a menu that needs new items added to it while maintaining the position of the lower-left corner. Essentially, each time an entry is added, the menu should expand upwards from "the upper-left corner" while keepi ...

javascripthtmlcssangularjsangular

Displaying JQuery dialogs briefly show their contents before the page finishes loading

Utilizing jquery 1.10.3, I am creating a dialog that is quite intricate. When I say 'intricate', I mean that the dialog's content includes data from a database, such as dropdown lists populated by the results of database queries, alongside s ...

phpjqueryhtmljquery-ui-dialogvisual-artifacts

PHP code isn't showing any posts

Context: I have implemented a PHP loop to generate a dynamic feed of my portfolio posts on my WordPress website. Issue: The first five posts are being displayed correctly, but the subsequent posts are not. I'm uncertain about the underlying cause and ...

phphtmlcsswordpressloops

Background: Cover causing image to be cut off

I'm having trouble trying to display the top part of a background image under my current navigation bar. I've been unable to identify what mistake I may be making here. Here is my HTML code: <section class="jumbotron"> <div class=" ...

htmlcsstwitter-bootstrap

Utilizing a loop for setting variable values in JavaScript

Using both JavaScript and JQuery. Let's imagine there is an array called ListArray with various sentences inside. Sounds easy enough. Is there a way to achieve this? var List = for (var i = 0; i < 10; i++) { //iterate over an array here to c ...

javascriptjqueryhtmlarrayslist

Image expansion

I have a container element div that holds various content of unknown length. How can I add a background image that extends the entire length of the container since background-images do not stretch? I attempted to use a separate div with an img tag inside. ...

htmlcss

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...

javascriptcsswordpressswiper.jselementor

Flexbox allows you to easily manage the layout of your website

I am currently working on a CSS project and have encountered an issue. Whenever I apply the "display: flex" property to the .student element, the border around it mysteriously doubles. The reason for wanting to use the flex property is to align the text ve ...

htmlcssflexbox

Please explain the display property used in Bootstrap input groups

I have been working on implementing a button that toggles the visibility of a datepicker when clicked. <a class="btn btn-primary btn-lg mr-5" href="../Stores/stalls.html">Check Current Operating Stalls </a> <div style="vertical-align: t ...

htmlcssbootstrap-4

Using the mpdf addPage function generates new empty pages

Hey there, I'm facing an issue where using $mpdf->addPage() within a for loop results in creating blank pages instead of adding content. My goal is to generate a new page when a certain condition is met and then populate it with the required conten ...

phphtmlcssmpdf

What is the best way to create a repeating Jquery loop in code?

Hey there! I've been working on creating a button that toggles the background color from white to yellow and back again using Jquery. However, I've hit a bit of a roadblock with implementing a loop function. If you'd like to take a look at m ...

jqueryhtmlcss

Center contents of Bootstrap row vertically

I have a simple property grid layout in Bootstrap 3 structured as follows: <div class="row"> <div class="col-md-3"> <div id="propGrid"> <div class="row pgTable"> <div class="col col-md-12"> <d ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Detecting key press events with extended duration using the DOM keydown event

Is there a way to receive notification when a key is pressed down, but not until it is released? It seems that using keydown continuously triggers the onkeydown callback while the key is held down. ...

htmldomw3c