Reposition the CSS content

In order to achieve the desired effect of having the text in the middle of the div both vertically and horizontally, you can try using the following code:

.servicecircle { 
    width: 204px; 
    height: 204px;
    background-image: url('secret.png');
    display: inline-block;
    background-repeat: no-repeat;
    margin-left: 22px;
    margin-right: 22px;
    /* Button transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
}

.servicecircle:hover{
    cursor: pointer;
}

.servicecircle:after { 
    content: 'Service 1';
    width: 100%; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: 2;
    /* Button transition*/
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.servicecircle:hover:after{
    background-image: url('secret.png');
    cursor: pointer;
    content: 'Service Description..';
}

This will ensure that the text is positioned at the center of the div both vertically and horizontally. Give it a try!

Answer №1

When you are confident that your text will remain on a single line, it is recommended to apply the same line-height as the height of your element.

Answer №2

Check out these two different methods for vertically centering content. One uses flexbox, which is supported by most browsers (http://caniuse.com/#feat=flexbox), and the other utilizes tables, which should work across all platforms: https://jsfiddle.net/k95shxfL/4/

<div class="flexbox-vertical-middle">
  <div>
    Service Description
  </div>
</div>

<div class="table-vertical-middle">
  <div class="table-cell">
    Service Description
  </div>
</div>

.flexbox-vertical-middle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-vertical-middle {
  display: table;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
}

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

Switching Up Poster Images in Chrome with Afterglow HTML5 Video on Hover

I have been experimenting with the html5 video player from AfterGlow. In my sample video, I included a poster attribute. However, I noticed an issue when viewing the video in Chrome - whenever I hover over it, the poster image flickers, creating an undesir ...

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Sin ...

The Datatable is only displaying a single record

After fetching data from a firestore collection and storing them in an array, I encountered an issue where only one entry is displayed in the datatable despite retrieving all documents from the firestore collection. What could be causing this problem? Belo ...

Issues with Flex layout in Firefox causing functionality errors

My two text inputs are not cooperating with flex properties as expected. They should be positioned like this: https://i.sstatic.net/ZSumb.png However, they are currently positioning like this: https://i.sstatic.net/e430n.png CSS .container{ width ...

Crashes within an HTML5 Canvas

Having recently started to explore Javascript and working with canvas elements, I've encountered a roadblock when trying to implement collision detection for the canvas walls. Typically, I have a small square drawn on the canvas that I can move aroun ...

Understanding the response format in jQuery and AJAX

Can anyone advise on the optimal data format for communication with JavaScript? Should I stick to JSON or use plain HTML instead? Are there any alternatives worth considering? ...

Unable to locate the hover animation feature on the product box

Attempting to recreate the image box from this page on my blog where the blog posts are displayed. I believed all that was required was a thumbnail arrow, but it is not displaying correctly with the current CSS file. <style> .thumbnail-arrow { wid ...

Submitting form via ajax whenever triggered

I am looking for a way to submit each form individually by clicking on the submit button. My question: How can I send each form separately and display the results accordingly? The code I have tried does not seem to be working, as nothing is being sent and ...

Arrange the Textbox next to each other

I have a requirement to display dynamically created textboxes side by side instead of one below the other. <div class="wrap-login100 p-l-20 p-t-25"> <form class="form" name="add_name" id="add_name"&g ...

Vue.js HTML5 Editor_vueful

I am currently utilizing browserify and attempting to incorporate the vue-html5-editor library from https://github.com/PeakTai/vue-html5-editor. However, when I attempt the following code: Vue.use(require('vue-html5-editor')); An error is thro ...

Using setTime in JavaScript allows for customizing and adjusting the

I'm having trouble getting this code to display the time. I thought it would work, but it's not showing the time. Can someone please help me figure out what's going wrong? function startTime() { var currentTime = new Date(); ...

Transitioning between pages causes a delay in loading the background

Today as I was working on my CSS, I encountered some issues. I utilized Bootstrap and Darkstrap for designing. In Darkstrap, the style for the body is body { color: #c6c6c6; background-color: #2f2f2f; } Meanwhile, in my own CSS: body { ...

What is the best way to increase the height of an image in a grid container beyond the height of

I am currently designing a grid layout to showcase recent articles. Each article includes an image and a brief description. My goal is to have the image taller than the content text block, while ensuring responsiveness across various screen sizes. Below i ...

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

As someone who is new to Angular, I am facing a challenge while working on my portfolio project. The issue arises when trying to receive a list of nested objects structured like this: "$id": "1", "data": { &quo ...

Having divs stacked on top of each other with one positioned fixed and the other

In my HTML document, there is a main div element called container that contains several child elements also in the form of divs. One specific child div, named top_bar, has its positioning set to fixed, while the rest of the child divs have relative posit ...

Arranging a list using Flexbox with equal spacing between elements in each row containing three items

I'm struggling with aligning a flexbox list. I have a row of 3 elements, but when there are only 2 elements on the row, there's a gap in the middle. My goal is to have a row with 2 elements look like x x o. However, my current code displays the ...

An issue has been detected where the bullet list is uneven due to the CSS property/value columns being set

Is there a more effective way to split a bulleted list into two columns than the method I am currently using and ensure that the columns are aligned at the top? .hand-bullet-list ul{ list-style-type: none; margin-left: 0px; } .hand-bullet-list ...

Viewing an image from a local file on a web browser

I am currently working on a project where I want the user to be able to select a local image that will then be displayed on the page. As someone who is new to web development, I did a lot of research and found some helpful information on StackOverflow. I t ...

Is it feasible to overlay a PNG image on top of a button while still allowing the button to be clickable?

Can you place an image (.png) on top of a button and still make the button clickable? https://i.sstatic.net/9Z8nH.jpg ...

Bootstrap link causing alterations to my CSS code

After incorporating Bootstrap into my HTML, I noticed that it caused some unexpected changes to my CSS code. Original CSS: https://i.stack.imgur.com/EsE6J.jpg Modified CSS after applying Bootstrap: https://i.stack.imgur.com/yH1r9.jpg Link to Bootstrap ...