I've been trying to find some information on this topic, but no luck so far :(
Here's a question for you all: how can I center and bottom-align a span inside an li using cross-browser CSS rules (specifically targeting Webkit browsers on Android devices)?
Can this be of assistance?
.page--game-core_bottom .tabs li {
position: relative; /* Used as a point of reference */
}
.page--game-core_bottom .tabs li span{
/* margin-top: 10px; */
position: absolute;
bottom: 0;
left: 0; /* The following three lines */
right: 0; /* center the spans horizontally */
margin: auto;
}
follow this CSS rule
li.a span,li.b span,li.c span {
display:block;
position:absolute;
bottom:0;
margin:0 auto;
}
In addition to Nick's response, I would suggest that after you have set your <span> element to be absolutely positioned, adjusting both the left and right properties to 0 while also assigning a fixed width will automatically center-align it.
This question pertains to CSS and is not really relevant to android. The webkit on android is quite capable and should not cause any issues with your webviews.
In order to align something to the bottom of a container, the container (in this case, your li element) must have relative or absolute positioning and be a block-level item (either display: block; or inline-block with potential limitations). The span element then needs to have absolute positioning with bottom set to 0.
(Keep in mind that changing your li element to a block-level item could potentially impact other parts of your layout)
For centering, you can either make the span element fill the width and use text-align: center, use margin: 0 auto; (if the span element has been turned into a block-level element with a specific width), or utilize the left and right 0 trick
I have created a small box element with a close button that looks like this: ___ | X| ‾‾‾ In order to make it more interactive, I applied some CSS so that when hovered, the box expands like this: ___________________ | X| ‾ ...
Recently, I've been working on developing a simple Connect 3 game in Xamarin that involves 9 ImageView components. Previously, I had created a similar Connect 3 game in Android Studio using Java. One of the advantages of using Android Studio was the a ...
I am attempting to integrate Crittercism with Mono for Android. After compiling the binding project with the crittercism jar and using the provided Metadata.xml, I noticed that the init method is missing from the resulting dll when inspected in the assembl ...
While implementing the login functionality through API in Ionic, I encountered the following error: Error: Property 'json' does not exist on type '{}'. Below is my loginpage.html code: <ion-header> <ion-navbar> & ...
Is there a way to use the 'col' classes without having them stack on top of each other? I have a form row that requires different numbers of columns on various screen sizes. <div class="form-row"> <div class="col-3"></div> ...
Is there a way to specify touch1 as the upper finger on the screen and always have touch2 as the lower finger, even if the lower touch is detected first? var touch1 = e.originalEvent.touches["0"]; var touch2 = e.originalEvent.touches["1"]; Can these ...
Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...
Having a strange issue with my layout in IE7. I don't have much experience dealing with IE7 bugs, so I'm hoping someone can assist me. When the page loads in IE7, the background doesn't cover the entire content. It sometimes stops at the to ...
I am facing an issue with implementing selected/unselected radio buttons. The radio buttons are being generated dynamically from a database source. <tbody data-bind="foreach: attByGroups" <-- ko foreach: attributes --> <input type="ra ...
Following up on a question from yesterday (Update HTML input value in node.js without changing pages), my goal is to submit an HTML form, send an ajax request to the server for two numbers, perform an addition operation on the server, and display the resul ...
My current method for redirecting to the Item page and performing a full page reload works well in most browsers, but unfortunately not in Safari and IE. In those two browsers, the current page is reloaded instead. Does anyone have any suggestions for an ...
https://i.sstatic.net/jAitD.png In this image, I have utilized ConstraintLayout's layout_constraintBaseline_toBaselineOf property to align two TextViews. However, my desired alignment is for the smaller TextView on the left to be vertically aligned w ...
I'm currently working on implementing responsive images, and while everything seems to be functioning correctly in the latest version of Firefox, I'm encountering issues with Safari and Chrome. <img src="/images/pages/arrivals/02_exterio ...
The animations for the slider and shuffle lottie are designed to go from 0 to 100 and then back to 0 when toggled, similar to the box animation. However, it appears that the slider animation disappears in the final frame while the shuffle animation appear ...
I'm currently developing an Android app using Firebase and Kotlin. I have created a Kotlin class that extends the Service class. The issue arises when, after starting the service, if I close the app it crashes! Strangely, when I write the same code ...
I am looking to display only the first 3 list items within each div.content. Then, upon clicking "SHOW MORE", I want to reveal the next 3 items. If the user clicks on "SHOW LESS", I need the display to revert back to showing only the initial 3 list items. ...
Hello everyone, I recently completed a project using Argon (Bootstrap / vue.js). It is a Single Page Application with a contact section that includes a contact form for name, email, and message. The contact form is built within a .vue file, which is import ...
I am facing an issue with tables that contain long strings as values. Is there a way to display the entire content of a table cell if the overflowing content is hidden? I thought about expanding the cell while overlapping adjacent cells without displacing ...
I am facing an issue with my Angular application form where even though the input fields are blank, formName.$valid is always true. Below is the HTML code for my form: <form name="contactForm" novalidate ng-submit="processForm(formData)" autocomplete=" ...
I am attempting to create a sticky, transparent div that changes its color based on the background behind it. I have both dark and light colored divs, and I want the sticky div to adjust its text color accordingly (white on dark backgrounds, black on light ...