Place the text in the middle of the circular image

Trying to add the text "Upload Profile Picture" in the center of a circle image, but it seems to not display when the code is executed. See below for the HTML and CSS code snippet: https://i.sstatic.net/A42rI.png

      <div class="small-12 medium-2 large-2 ">
         <div class="circle upload-button d-flex mx-auto mb-4" style="position:unset;">
           
           <img class="profile-pic" src="">
           <div class="centered">Upload Profile Picture</div>
           
         </div>
            <input class="file-upload" type="file" accept="image/*"/ >
         
      </div>

    .profile-pic {
        max-width: 222px;
        max-height: 222px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .file-upload {
        display: none;
    }
    .circle {
        border-radius: 50%;
        overflow: hidden;
        width: 228px;
        height: 228px;
        border: 8px solid #dbdbdb;
        position: absolute;
        top: 72px;
      transition: all .3s;
    }

    .circle:hover {
      background-color: #909090;
      cursor: pointer;
    }
    img {
        max-width: 100%;
        height: auto;
        min-width: 212px;
        min-height: 212px
    }
htmlcssasp.net

Answer №1

Give this a shot:

.profile-pic {
  max-width: 222px;
  max-height: 222px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.file-upload {
  display: none;
}

.circle {
  border-radius: 50%;
  overflow: hidden;
  width: 228px;
  height: 228px;
  border: 8px solid #dbdbdb;
  position: absolute;
  top: 72px;
  transition: all .3s;
}

.circle:hover {
  background-color: #909090;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  min-width: 212px;
  min-height: 212px
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
  <div class="small-12 medium-2 large-2 ">
    <div class="circle upload-button d-flex mx-auto mb-4">
      <img class="profile-pic" src="">
      <div class="centered">Add Profile Picture</div>
    </div>
    <input class="file-upload" type="file" accept="image/*"/ >
  </div>

Answer №2

the property for the class centered was not mentioned earlier, I have included it in my code

.profile-pic {
  max-width: 222px;
  max-height: 222px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.file-upload {
  display: none;
}

.circle {
  border-radius: 50%;
 text-align:center;
  width: 228px;
  height: 228px;
  border: 8px solid #dbdbdb;
  position: absolute;
  top: 72px;
  transition: all .3s;
  
}

.circle:hover {
  background-color: #909090;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  min-width: 212px;
  min-height: 212px
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  <div class="small-12 medium-2 large-2 ">
    <div class="circle upload-button d-flex mx-auto mb-4">
      <img class="profile-pic" src="">
      <div class="centered">Upload Profile Picture</div>
    </div>
    <input class="file-upload" type="file" accept="image/*"/ >
  </div>

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

SVG with a background image that is centered

Looking to include a centralized image within an SVG. This image will act as a user avatar, but my attempts have been unsuccessful so far. .body { width: 100%; height: 100%; background: #1f1b33; padding: 2rem; } svg { width: 120px; } <div ...

htmlcsssvg

An error message reading "TypeError: 'undefined' is not callable" occurs when attempting to apply my custom CSS

I am facing an issue that I cannot seem to debug. Every time I attempt to add my custom CSS file to the header, which is required for the script called onepage-scroll.js, I encounter an error. The script mandates placing the file in the header using <sc ...

javascriptjqueryhtmlcss

Leveraging CSS Selector to interact with a button

I would like to execute a click action on this specific button using css_selector. <div class="ui-buttonset"> <button class="ui-button ui-dfault ui-text-only" type=" button" role="button" aria-disabled="false"> <span class-"ui- ...

pythonhtmlcssselenium-webdriver

Different methods to customize alternating rows in asp.net mvc

I have implemented a <% foreach ...%> loop to display a collection of items on my website. In order to style alternating rows with different background colors in my list, I have come up with a solution that works but feels like a workaround. This i ...

jqueryhtmlasp.net-mvcstylesheet

"Google Maps Integration: Customize Your Map with Grey Color Scheme and User-F

After reviewing the other questions and answers related to my problem, none of them seemed to address it. The issue is that when loading and placing a marker, the map seems to "freeze," turns grey, but still displays controls. The marker ends up in the up ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Prevent a specific image from being impacted by CSS styling

I've implemented the following CSS on my website for image opacity: img { opacity:0.4; filter:alpha(opacity=40); } img:hover { opacity:1; filter:alpha(opacity=100); } Now, I am looking to exclude certain images from being affected by this ...

cssstyles

Building a Database Table Based on a Model in .NET Core

Recently delving into the world of .NET Core, I have successfully transferred the Migration folder, ApplicationDbContext, and ApplicationUser file to a .NET Core class library project and referenced it in the web project. Everything seems to be working smo ...

c#asp.netasp.net-mvcasp.net-coreasp.net-core-mvc

Exploring the elements of Ext.js gridpanel and content components

Currently, I am diving into the world of Ext.js and finding it to be quite distinct from the asp.net ajax library despite some initial similarities. My goal is to populate a grid with test data formatted in JSON. The code snippet below illustrates my atte ...

javascriptasp.netajaxextjsclient-side

Having trouble properly refreshing Bootstrap scrollspy that is spying on the <body> element

I've been looking at a post on Bootstrap's scrollspy component (found here). In my code, I initialize a new scrollspy to track the body element using: $("body").scrollspy({ offset: 25 }); As my code progresses, I make AJAX requests that add or ...

javascriptjqueryhtmlajaxtwitter-bootstrap

What is the best way to serialize form data while also including a child collection?

Currently, I have a webpage within my web application where I am in the process of creating a Person object using an AJAX POST request. The required JSON format that needs to be sent to the API endpoint is as follows: { "categoryId": "string", "na ...

jqueryhtmljsonajaxserialization

Both the complete and success functions are not triggering simultaneously

When I try to use both success and complete together, it seems to not be working properly. If I omit dataType: "jsonp", then the success function works fine, but including it causes only the complete function to work. var reRank = false; function reAss ...

javascriptjqueryhtmlajaxfancybox

Fixing alignment and responsiveness problems with a hovering circle div

I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing. Here is a live demo: demo Below is my code: <div id ...

htmlcssresponsive-design

Embrace the words enveloped within large quotation marks

I am seeking a way to format paragraphs with large quotation marks surrounding them. I have attempted several methods, but my line-height seems to be affected, as shown in the following image: Can anyone suggest a proper method for achieving this? (Addit ...

htmlcss

How can you determine the status of the display element affected by .slideToggle()?

I have attempted to use is(':visible'), is(':hidden'), and css('display') but I am unable to retrieve the display status of an element after applying .slideToggle() What could I be overlooking? Here is the jsfiddle: http://j ...

javascriptjqueryhtmlcssslidetoggle

How can one effectively style text to appear italic using CSS and HTML?

What is the proper method to italicize text? I have come across these four different approaches: <i>Italic Text</i> <em>Italic Text</em> <span class="italic">Italic Text</span> <span class="footnote">Italic Tex ...

htmlcsssemantic-markup

When attempting to replace a text node with a combination of text and HTML using replaceWith, an error stating "not a function" is triggered

I am dealing with multiple text nodes that need to have some text replaced with HTML: <pre>{ "data": [ { "source": "<a href=www.e.com>e.com</a>", "created_time": "2015-11-13T06:16:09+0000", ...

javascriptjqueryhtml

Updating multiple values in an SQL database using ASP.NET

My ASPX page is quite simple, featuring a single textbox and a button. The goal is for users to input an [ID] number into the textbox, which will then automatically add a date/time stamp to the corresponding row [ShipDate] in SQL. However, I also need to i ...

c#sqlasp.net

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

jqueryhtmlcss

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

I am facing an issue with adding javascript files and css to a content page of a master page in asp.net. I attempted to include a datetime picker on my ContentPage, but it only works on the masterpage. When I try to add the same code to my contentpage, i ...

javascriptcssasp.net

What is the process for extracting the differences between two or three files and merging them together in Node.js?

Recently, I've been experimenting with webpack and successfully managed to output and transform es5 build to include nomodule in the tags directly from HtmlWebpackPlugin using hooks. Similarly, for the es6 build, I added type="module". Howe ...

javascripthtmlnode.jswebpack