tips for positioning images and text in the center using css classes

Here's what I currently have:
http://jsfiddle.net/nCs88/

Here's my goal:

As a beginner, I am struggling to center the button images with the text. Any help would be greatly appreciated as this has been frustrating me for hours.

Answer №1

To center the elements, simply add vertical-align:middle to both classes.

Live demo on JSBin

Include the following CSS:

.custombutton, .controlbutton {
    vertical-align: middle;
}​

Answer №2

Give this a try

<style type="text/css>
 .customButton{
    border:1px solid #abc; 
    display:table-cell; 
    text-align:center;        
  }    
 .customBtn{
    display:inline-block; 
    vertical-align:middle; 
    margin:5px;
  }
</style>

then

<div class="customButton">
   <div class="customBtn"><img src="user.png" alt="" /></div>
   <div class="customBtn">Click Me</div>
</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

Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code : <!-- Custom Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div> <div class="li ...

Read a local file using the HTML5 FileReader

I am currently working on developing an offline application that can read text from a locally stored text file. I have been researching and found that using html5 and FileReader can make this possible. My goal is to set a hard-coded relative path for the ...

Refreshing a webpage is not necessary when using a JQuery form within a div

I need help with some code I have. In my index.html file, there is a div: <div id="logindiv"> <?php require_once('login.php'); ?> </div> This div is utilized with jQuery: <script type="text/javascript"> $(document ...

My confusion is running high when it comes to navigating the mobile version of my website

Creating a navigation bar for my website has been challenging. Whenever I switch to mobile view, the list in my navigation bar shifts 40px to the right side of the screen where there's nothing. Is there any way you can assist me with this issue? ...

A straightforward development and production build to incorporate HTTPS for a static website created with React and Express

Is there a straightforward method to create a static web page and Node backend where the Node server runs in HTTPS during development but not in production? How can the static web page point to https://localhost/foo in dev mode, and simply /foo in producti ...

Code in PHP for implementing the Caesar cipher algorithm

(check out this example on jsfiddle: Caesar cipher) I have been working on a Caesar cipher, which involves shifting alphabetic characters; for example, with a shift parameter of 3: Original: a => d, b => e, c => f, ... Here is what my code look ...

The div element is overflowing beyond the available space

I have already searched for a solution to this question, but despite trying everything, I have not been able to find one. Therefore, I am asking again, my apologies :-). My challenge is to make a row fill all the remaining screen space on the page, but no ...

Having trouble with some JS and Jquery codes not functioning properly in IE until the page is refreshed a few times. Any suggestions on how to fix this issue?

My code seems to be experiencing issues in Internet Explorer where some of the JS and jQuery codes are not functioning correctly initially, but start working after refreshing the page a few times. Any thoughts on why this could be happening? Here is the ...

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

Infinite loop readiness with JQuery

My current project involves preloading images and seamlessly fading them in once they are fully loaded using JQuery. To achieve this, I attempted to create an invisible image tag where the images would load before setting the source back to the original im ...

Automatically change div background image based on window resizing

.step-1-4 { background:url('../images/gadget-4-sprite.png') no-repeat; width:950px; height:70px; margin-left: 15px; } The code above sets the CSS for a div containing a background image. The dimensions of the div match that of the imag ...

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

I am currently using the Vue framework to work on printing webpages for my application. I have an issue that needs a solution, which I will explain below. <template> <div id = "intro" style = "text-align:center;"> <div ...

Two liquid level divs within a container with a set height

I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...

Instructions on how to navigate back one page to determine which page initiated the action

I am looking for a solution to implement a back button that takes me back one page while caching it. Currently, I am using the following code: <a id="go-back" href="javascript:history.go(-1)" type="button" class="btn btn-danger">Back</a> Howe ...

What is the best way to make the Nav bar overlap instead of shifting content to the right?

Is there a way to open the nav bar and have it overlap on the right without pushing content to the right? I tried experimenting with position and z-index, but it didn't work. Thank you! Link <div id="mySidebar" class="sidebar" ...

Adjust the height of the `<input type="file">` element to match the containing div by utilizing Bootstrap 4.5 styling

Can I update the .html file to give the "Choose File" and "Upload" options the same height as the "Upload" button in the second div, which has the py-4 tag? <div class="input-group"> <div class="custom-file py-4"> < ...

Tips on adjusting section height as window size changes?

Working on a website that is structured into sections. Initially, all links are aligned perfectly upon load. However, resizing the window causes misalignment issues. Check out my progress at: karenrubkiewicz.com/karenportfolio1 Appreciate any help! CSS: ...

What could be causing my website to lose its responsiveness after linking a domain?

Recently, I created a basic website for an event in my town using AWS Amplify from Amazon. Initially, the website was hosted without a custom domain and had a random URL. It worked well on both web and mobile platforms. However, after connecting a custom d ...

The :before and :after pseudo classes are not displaying properly on the video element

I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fin ...

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

I am facing a challenge in selecting an h1 element from a remote page that I have loaded into $(data). Despite several attempts, I am struggling to write the correct code. When I use this code: console.log($(data)); The output is as follows: [text, meta ...