What is the best technique for positioning a div using the ELEMENT_NODE method?

　　#top {
        height: .5rem;
        padding-left: 2.7rem;
        line-height: .5rem;
        color: #666;
        font-size: .12rem;
        position: relative;
        background-color: rgb(241, 241, 241);
    }

    #top div {
        position: absolute;
        right: .18rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: .14rem;
        line-height: .20rem;
    }

    #top .icon {
        font-size: .28rem;
    }

<section id="top">
<div>
allMessages
<svg class="icon record-info" aria-hidden="true">
<use xlink:href="#icon-wenjuan"></use>
</svg>
</div>
</section>

https://i.sstatic.net/6EjdD.png
　　　　

I aim to place the "allMessages" text in the center of the div.

However, when I adjust the line-height for the #top div, the "allMessages" text always ends up aligned with the bottom of the svg.
What is the best method to ensure that the 'allMessages' text is positioned at the same level as the middle of the svg.

htmlcss

Answer №1

Make sure to update your code as shown below.

#header {
    height: .8rem;
    padding-left: 3.2rem;
    line-height: .6rem;
    color: #444;
    font-size: .14rem;
    position: relative;
    background-color: rgb(221, 221, 221);
}

#header div {
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .16rem;
    line-height: .22rem;
}

#header .icon {
    font-size: .32rem;
}
#header span {
    display: inline-block;
    vertical-align: middle;
}

<section id="header">
    <div>
        <span>allNotifications</span>
        <svg class="icon alert-info" aria-hidden="true">
            <use xlink:href="#icon-notification"></use>
        </svg>
    </div>
</section>

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

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

I am currently working on developing a web-based editor that allows users to customize basic settings for their audio files. To achieve this, I have integrated wavesurfer.js as a plugin due to its efficient and cross-browser waveform solution. After prior ...

javascriptruby-on-railshtmlaudioweb-audio-api

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

What is the best method for incorporating CSS into an Angular application's embedded PowerBI report, which is displayed

Is there a way to incorporate external CSS or another method to apply styles to a PowerBI report embedded in an Angular application as an iframe? Specifically, I want to remove the scrollbar to ensure that the report seamlessly fits within the angular page ...

cssangularpowerbiexternal

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

javascripthtmlxmlajaxxslt

Select a specific date range from a form and export CSV file containing MySQL data within that range

I have successfully implemented a database CSV export functionality, but now I am looking to allow the user to specify a date range for the export process. Below is the HTML section that handles the date selection (date format: mm/dd/yyyy): <form act ...

phphtmlmysqldatabase

Starting the download of the canvas featuring a stylish border design

I'm facing an issue where the canvas border is not showing up when I download the canvas with a border. The border appears on the screen, but it doesn't get included in the downloaded canvas. let canvas=qrRef.current.querySelector("canvas&qu ...

javascripthtmlcsscanvas

Using JQuery to dynamically change className based on specific logic conditions

I am struggling to dynamically change the class name of a div based on the text inside another div using jQuery. Here is an example of the HTML structure: <div class="div-overlay"> <a class="image" href="https://www.e ...

javascripthtmljqueryvariables

Modifying .vue files within Laravel seems to unexpectedly impact unrelated CSS styles

I've been working on a Laravel project that involves building Vue components. Strangely, every time I update a .vue file and add it for a commit, modifications are also made to the app.css and app.js files. These changes seem to be undoing a particula ...

javascriptcsslaravelvue.jsnpm-run

Tips on how to pass properties as arguments to mixins

Here is the code I have: mox(first, second) {first} second a mox(transition, 0.3s linear all) I want to call the mixin like this: mox(transition 0.3s linear all) If we modify mox, it would look like this: mox() arguments a mox transition 0.3 ...

cssnode.jsstylus

When utilizing an API to render text into a div, the offsetHeight function may return 0

I'm working with a div that displays text fetched from an API call. I'm trying to implement a See more button if the text exceeds 3 lines. Here is my approach: seeMore(){ this.setState({ seeMore: !this.state.seeMo ...

javascriptcssreactjs

How to successfully transfer input data from a dialog to a controller using jQuery and Grails

As a newcomer to Grails and jQuery, I recently created a jQuery dialog following this example: http://jqueryui.com/dialog/#modal-form The goal is to open a dialog, input data, and have it displayed in a dynamic table on the main page. Once all entries are ...

javajavascripthtmlgrailsgroovy

Is it possible to execute this animation with a single click for repetitive playback?

CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...

javascripthtmljquerycsscss-animations

Encasing the bootstrap dropdown menu and trigger within individual parent divs for a tidier appearance

Is it possible to toggle a bootstrap dropdown when it is wrapped in another div by using attributes such as data-target or aria-labelledby? I have seen examples where data-toggle="dropdown" and class="dropdown-menu" are siblings. An example of what I am r ...

jqueryhtmltwitter-bootstrapdrop-down-menu

Switch div and expand/shrink the rest

Apologies for what might seem like a trivial question, but after working for a few hours now, I'm finding it difficult to wrap my head around this. My initial instinct is to handle this by manipulating the entire div structure with JavaScript, but I c ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the process for embedding HTML and CSS content into an Outlook email?

Has anyone experienced trouble adding an HTML and CSS web page to an Outlook email? I attempted to use the "Insert as text" option, but the CSS file is not loading correctly in Outlook. Any suggestions on how to fix this? The error message states that the ...

jquerycsshtmlweb

Challenge with collapsing a button within a Bootstrap panel

Check out this snippet of code: <div class="panel panel-default"> <div class="panel-heading clearfix" role="tab" id="heading-details" data-toggle="collapse" data-target="#details" data-parent="#panel-group" href="#details"> <h4 c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Content sliding to the left due to modal prompt

I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...

javascripthtmlcssbootstrap-4bootstrap-modal

Alignment issue: Center alignment failing to work correctly

I'm currently working on a navigation bar with a central title and links to other pages aligned to the right. Despite using text-align: center, the title remains off-center. I've implemented a flexbox to ensure that the title and links are on the ...

htmlcss

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

javascriptcsshtml5-canvasoverflowp5.js

Issue with CSS: 200vw not scaling correctly for mobile devices

I'm attempting to create a horizontal slide effect between two div elements, so here is the HTML code: <div id="container"> <div class="viewport-1"> <div class="inner-div"> <h1>Viewport background 1</h1></ ...

javascriptjqueryhtmlcss