The alignment of the inline-block text baseline seems off.
Is there a way to place the radical at the bottom of the inline-block instead of aligning it with the text baseline?
Existing Code Section
.parent {
height: 200px;
}
.radical {
border: 1px solid #000;
display: inline-block;
vertical-align: bottom;
}
.radicalData {
height: 200px;
}<div class="parent">
<span class="radical">√</span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>To incorporate the square root symbol √ as part of the content, you can utilize an ::after selector. Position it with position: absolute and adjust its placement with top: 6px to overlay it on top of the bordered span.
HTML:
<div class="parent">
<span class="radical2"></span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>
CSS:
body {
font-size:28.8px;
font-family:"Symbola";
vertical-align:bottom;
}
.parent{
height:200px;
}
.radical {
border:1px solid #000;
display:inline-block;
vertical-align:bottom;
}
.radical2 {
border:1px solid #000;
display:inline-block;
height: 33px;
position: relative;
vertical-align:bottom;
width: 20px;
}
.radical2::after {
content: "√";
height: 33px;
position: absolute;
margin-bottom: -10px;
top: 7px;
z-index: 1;
}
.radicalData {
height:200px;
}
View the live example on Fiddle here.
To reposition the baseline of the second inline-block to the bottom while maintaining default alignment, add overflow:hidden:
.parent {
height: 200px;
}
.radical {
display: inline-block;
}
.radicalData {
height: 200px;
}<div class="parent">
<span class="radical">√</span>
<span class="radical" style="overflow:hidden;">hello</span>
<span class="radicalData"></span>
</div>You can also modify the line-height for a similar effect:
.parent {
height: 200px;
}
.radical {
display: inline-block;
border:1px solid;
vertical-align:bottom
}
.radicalData {
height: 200px;
}<div class="parent">
<span class="radical" style="line-height:12px;">√</span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>I am looking to customize a MUI select component that I have rendered on a dark background. My goal is to make the outline and all its contents light colors, specifically grey and white. https://i.sstatic.net/HFUBj.png So far, I have successfully changed ...
My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...
Looking to enhance my understanding of flexbox. Encountering a display issue in Chrome where the right column is too wide and the left column is too skinny, while it displays correctly in Firefox. Any suggestions on how to fix this for Chrome? .child ...
Looking for help with a CSS code for a horizontal menu: .vertical-nav { height:auto; list-style:none; width: 100%; /******* MODIFIED ********/ margin-top:0; margin-bottom:35px; margin-left:0; } .vertical-nav li { height: 25px; ...
I have been working on setting up an http server using Node.js that reads a basic HTML file. This HTML file includes some scripts stored on my local machine. However, Node seems to be unable to load these scripts. Can someone explain why this is happening? ...
Currently, I am in the process of developing a tree structure engine using an HTML5 canvas. In this engine, each tree node is connected to a database and has a unique name along with various other values. To represent these nodes visually, I have assigned ...
I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...
In my JavaScript code, I'm attempting to retrieve location coordinates using the onchange event and then display those coordinates in a label. I've tried alerting the coordinates successfully, but I'm struggling to update the label using doc ...
I'm encountering an issue with my CSS3 animation that works perfectly on Firefox but doesn't display properly on the Chrome browser. You can view the final result on www.stamp4all.com, where the animation involves rotating arrows. Below is the C ...
I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...
I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...
I am looking to design a container that extends beyond the width of the page, allowing users to pan by dragging through empty space between controls without zooming in or out. What is this type of container control typically referred to as? I am intereste ...
I am facing a challenge in changing the color of two specific characters when hovering over them inside a textbox that is styled purely with CSS. As the content is created using only CSS, I am unable to use style tags to accomplish this and feel stuck. M ...
I've been struggling with a basic 2-column design created using the online editor at mjml.io. I can't seem to get it to stack on mobile devices. The email looks identical on desktop (Outlook 365 for PC) and mobile (Outlook for iOS on iPhone 13) ...
Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effective ...
I've noticed that most of the questions I've come across are related to WordPress or Bootstrap nav bars, which I'm not familiar with. I've created mine using CSS. I want to enhance my navigation bar for mobile users by making the butto ...
I'm currently working on a program that aims to combine a variable number of one-row matrices with varying lengths. The goal is to add the elements of each matrix together, where element one of array one adds to element one of array two, and so forth. ...
Within this straightforward CSS snippet, my goal is to align the bottom of h1 with the bottom of p, without having h1 display below p. <div id="sqrs" style="width:200px; height:200px; border:1px solid BLACK;"> <p style="width:100px; height:100px; ...
My goal is to progressively fill a border every minute, reaching full capacity after 60 minutes and then starting over. This task is part of my practice with react.js. I attempted to create a variable using .getMinutes(); to track the current number of mi ...
<aside class="side_article_content"><p id="defaultText">Chakras are explained here.</p> <p id="baseChakraInfo" style="display:none;">Base Chakra details here.</p> <p id="sacralChakraInfo" style="display:none;">Sa ...