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>


　　　　

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

"Created a persistent fullscreen overlay over the body content, complete with scroll bars

Can a fixed fullscreen division position:fixed; width:100%; height:100%; cover the entire body of a page, including scroll bars? I understand that setting the body to overflow:hidden; can achieve this, but I am facing an issue where I want the fullscreen ...

htmlcss

Unable to load nested iframe

When working with an HTML document, I tried to add an iframe in the body without any cross-origin restrictions (same URL). However, when I tried to do the same thing within the appended iframe, although the nested iframe element was successfully added to ...

javascripthtmliframe

Adjusting the height of the search icon through the Jquery toggle action to create animated effects

While trying to create a search field with the click function (animate), I noticed an issue similar to what is seen in this example: . Whenever the search icon is clicked, it moves up and down unexpectedly, and I am uncertain as to why this behavior is occ ...

javascriptjqueryhtmljquery-animate

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Looking to create a dynamic website with interactive features like adding and removing active links upon clicking, and smooth transitioning between sections using JavaScript. Feel free to skip over the SVG code. HTML source code <div class="s ...

javascripthtmlbootstrap-5sidebar

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

htmlcss

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click

How can I use JQuery to enable or disable checkboxes upon loading?

I am looking to implement a feature where the checkboxes are enabled when the .group is checked and disabled when it is unchecked. Although I can toggle between them, I'm facing difficulty in disabling the unchecked checkbox using the .group. Upon lo ...

javascripthtmljquery

Is it possible to switch the orientation of the input fields from vertical to horizontal?

My custom form is displayed below: <form novalidate class="form-group" ng-hide="tab==1"> Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /> Min Price: <input type="numbe ...

htmlcssformstwitter-bootstrap

Is there a way to clear out all items from the cart using PHP?

I have a shopping cart with items that I want to remove all at once. I tried creating a submit button with the post method called 'remove_all', but it's not working and showing an error message saying "The requested URL was not found on this ...

phphtmlsession-cookiessession-variables

What are some ways to utilize the <span> tag to apply distinct styles to specific characters within text compared to

Imagine I have a string like <p>hi my name is john</p>. I know that I can use the span element to target specific characters and apply different styles using CSS. But what if I want to style "name" and "john" differently from each other and the ...

cssxhtml

What are some solutions for resolving differences in the display of pseudo elements between Macbooks and Windows desktops?

Greetings! I successfully converted an XD file to HTML and CSS code. I tested it on my Windows PC, but I haven't had the chance to test it on a Macbook yet. Details: I implemented a button with a pseudo element to show a right arrow on the right side ...

htmlcss

Character count in textarea does not work properly when the page is first loaded

As English is not my first language, I apologize in advance for any grammar mistakes. I have implemented a JavaScript function to count the characters in a textarea. The code works perfectly - it displays the character limit reducing as you type. However, ...

javascripteventstextareahtml

Does MySQL Workbench automatically convert camel case attributes?

I'm curious to understand something. I defined an attribute called userId, but in MySQL Workbench it shows up as user_id. Is this usual? @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name= "userId") private ...

htmlmysqlspring-boothibernatemysql-workbench

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

The issue with MUI TextField: the outline is overlapping the label

Recently, I encountered an issue with a MUI TextField in my project. In its default state, everything appeared fine: https://i.stack.imgur.com/WFzOr.png However, when I increased the font size as per the theme provided below, the label started to overlap ...

cssreactjsmaterial-ui

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

Is it possible to highlight only a specific color on the div background?

I'm trying to create a layout similar to this: I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this: The issue is that the rectangles ar ...

htmlcssreactjs

Fade one element on top of another using Framer Motion

Looking to smoothly transition between fading out one div and fading in another using Framer Motion, but facing issues with immediate rendering causing objects to jump around. Example code snippet: const [short, setShort] = useState(false); return ( ...

javascriptcssreactjsanimationframer-motion

Parsing HTML using JavaCC

Recently, I've embarked on a journey with javacc and have been tasked with enhancing a basic html parsing using javacc code. My inquiry pertains to the <script> tags which contain numerous characters - like > and < that hold different mean ...

htmlparsingjavacc

Enhancing design precision from Figma to flawless pixels

I'm facing the challenge of converting a figma design into an HTML and CSS template with a fixed dimension of 1440px. I'm unsure about where to begin coding in terms of screen size - should I start at 1440px and scale down/up, or begin with mobil ...

htmlcssfrontendfigmapixel-perfect