I need help centering a + symbol inside a div. It's displaying differently on iOS compared to Chrome, with the icon appearing lower in the div on iOS. Any suggestions for fixing this issue?
.addplus {
border-radius: 50%;
background-color: blue;
width: 38px;
height: 38px;
margin: 5px;
color: #fff;
font-size: 38px;
float: left;
text-align: center;
line-height: 38px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}<div class='addplus'>
+
</div>Unfortunately, I don't have access to an IOS device at the moment to verify if this solution works. However, you can give it a try:
Enclose the "+" symbol within a span tag and then center align the span within the div.
You can do something like this:
.addplus {
position: relative;
border-radius: 50%;
background-color: blue;
width: 38px;
height: 38px;
margin: 5px;
color: #fff;
font-size: 38px;
float: left;
text-align: center;
line-height: 38px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
.plus {
position: absolute;
color: #fff;
font-size: 38px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="addplus">
<span class="plus">+</span>
</div>Currently, I am dynamically pulling content into li elements using ASP.NET. My goal is to wrap a specific div class around the first 3 li items in the list only. Here is an example: <ul class="wrapper"> <div cl ...
Within my Angular 2 application, I have implemented a collapsible and expandable menu. The issue I am facing is with the toggling of icons - when expanding one menu item, the icon changes correctly but it also changes for all other menu items that are not ...
I'm struggling to center a CSS drop-down menu on my webpage without causing the drop-down effect to break. No matter what I try, it seems to mess up. What am I missing? Snippet of code: html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,b ...
After making progress on the background of my new website, I've hit a roadblock. The background image shrinks to less than 100% height when the browser window is resized. I need the background image to remain full size at all times, without the heigh ...
I've been struggling with a unique challenge for the past day without success. I can't seem to figure out where I am making a mistake. My goal is to design a fixed container layout using Bootstrap, which is precisely 33em wide and horizontally c ...
Recently, I've taken up coding as a hobby. However, I've encountered an issue with my modal not popping up on page load. Strangely, it works perfectly fine when I open a blank document but fails to load on my friend's homepage. I am using Dr ...
I have a span id with textContent which have their own time(hour/minutes) <div class="here"> <span class="time" >8 min</span> </div> <div class="here"> <span class="time" >22 min&l ...
Is it possible to achieve something like the following using only CSS? h* + p { color: red; } Instead of h1 + p, h2+p... { color:red; } I haven't found a solution yet, any suggestions would be appreciated. Thank you! ...
Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height? Check out my solution on Codepen for reference. View Codepen Example *** HTML *** <di ...
Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...
I've come across many similar questions on SO about this issue, and I've tried various solutions without success. I'm using an Epson LX300+II printer and I want to print pages from my web application in a plain format, like how it would look ...
After creating an HTML file using Angular Material, I noticed that the components' CSS files are not being applied properly. This is a snippet from my HTML file: <div class="content-container"> <div class="tree-container&quo ...
I need help with creating a hover effect on my website similar to the one seen here: ...
Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...
I am aiming to have my .modal div class smoothly scale from 0 to 1 right in the center of the screen instead of starting at the bottom right and then moving to the center before settling in its final position. I have checked various resources like MDN docu ...
As a Blogger user, I am looking for guidance on how to add a border around the title of each widget/gadget. When I place widgets such as About Me, Follow Us, etc., in my sidebar, I want them to have borders like in this image. While I know how to customize ...
I am working on adjusting my design to accommodate smaller screen sizes where elements may shift to a second line. I want these elements to align to the left instead of being centered. The image below illustrates my goal: https://i.sstatic.net/CzX5V.png C ...
In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...
For quite some time now, I've been experiencing a strange problem with webpack. The layout in Dev seems to be slightly different than the build. While inspecting in Firefox, I noticed that the difference lies in the white space. My question is, what e ...
Today, I decided to dive into z-index and experiment with it. However, I am having trouble understanding the behavior. Below is a simplified version of the HTML structure: // content has z-index of 30, pos abs <div class="content"> // content-c ...