Ensuring proper alignment within anchor links and buttons

button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}

button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}
<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

We are currently facing an issue in our project regarding the alignment of buttons with icons that render as either a button or an anchor based on props. The misalignment of button content has become a challenge for us, as demonstrated in the code snippet provided.

Why is the inner div aligning differently in a button compared to an anchor? How can I correctly align the contents of the button vertically without simply adding padding-top?

javascripthtmlcssbuttonalignment

Answer №1

It appears that the reason for the unexpected behavior is due to invalid HTML coding according to HTML5 standards. Placing a div inside a button is not considered valid, leading to inconsistent rendering across different browsers.

To achieve the desired outcome, you can utilize workarounds such as adjusting padding or positioning. However, please note that these solutions may not align with valid HTML practices. One possible workaround involves resetting paddings and vertically centering content within an anchor tag without relying on its height. You can find an example of this workaround here: https://jsfiddle.net/ne037nL7/

According to HTML5 guidelines, buttons should only contain phrasing content, which includes text, span, i, and more. For a full list of acceptable phrasing content, refer to: https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content

For additional information, you can consult the W3 source document regarding the button element: https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

Answer №2

Give this code a shot.

  <style>
            .main{
        display:table;
        }
            button, a {
              height: 30px;
              display: table-cell;
              border: 1px solid black;
              vertical-align: middle;
              padding:0 10px;
            }
            button {
              background: transparent;
              height: 32px;
              margin-right: 10px;
            }

            button > div, a > div {
              width: 30px;
              height: 10px;
              background-color: red;
            }
            </style>
          <div class="main">
            <button>
              <div class="buttonDiv"></div>
            </button>

            <a href="#">
              <div class="anchorDiv"></div>
            </a>
        </div>

Answer №3

Give this a try 

a{
display:table-cell ;
}


button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}
a{
display:table-cell ;
padding:0.5px 6px;
}
button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}
<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

Answer №4

.btn {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
  float:left;
}

.link {
  height: 30px;
  border: 1px solid black;
  vertical-align: middle;
  display: table-cell;
}

.btn > div {
  width: 30px;
  height: 10px;
  background-color: red;
}


.link > div {
  width: 30px;
  height: 10px;
  background-color: red;
  vertical-align:middle;
}
<button class="btn">
  <div class="buttonDiv"></div>
</button>

<a href="#" class="link">
  <div class="anchorDiv"></div>
</a>

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

Passing URL parameters from App.js to routes/index.js

I have a URL that looks like this: http://localhost:3000/?url=test In my Express application's app.js file, I'm attempting to extract the "test" parameter from the URL and pass it to my routes/index.js. Currently, I can easily send a static var ...

javascriptnode.jsexpress

Incorporating External JavaScript and CSS specifically for a single component

In my Angular 4 application, I have a specific component that requires the use of a js and css file. While most guidelines suggest placing these files in the Index.html file, I prefer to only load them when this particular component is accessed, not on e ...

javascriptangularwebpack

Having trouble with updating a Firebase database object using snap.val()

I'm trying to figure out how to update a property within the snap.val() in order to make changes to my Firebase database. function updateListItem(listItem) { var dbRef = firebase.database() .ref() .child('userdb') .child($sco ...

javascripttypescriptfirebasefirebase-realtime-database

Contrasting the Javascript onload event with plain script within an html page

Can you identify the distinction between these two code snippets: Sample 1: <script type="text/javascript> function myfunc () { alert('hi'); } window.onload = myfunc; </script> Sample 2: & ...

javascriptdom-eventsonload

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by brea ...

htmlimagecss

Extracting information from XML to display on my HTML webpage

I am utilizing the PHP library SimpleXML to extract information from an existing XML file on my website and incorporate it into an HTML page. Below is a snippet from the XML located at : <DTilt> <frontSide imagePath="94341/20130510150043_ACX ...

phphtmlxml

Creating visually appealing websites is made easy with Bootstrap 5's innovative image and

I am working on a Bootstrap 5 website template and I want to add text with a white background in the center of an image. Instead of seeing just a white color over the image, I would like to have a white rectangle with a title and text centered on the imag ...

htmlcsstwitter-bootstrapbootstrap-5

Converting Strings into Variable Names in Vue.js: A Step-by-Step Guide

Hi everyone, I was wondering if there's a way to convert a string into a variable name. For example, I want to convert "minXLabel" to minXLabel so that I can use it within span tags like this: <span>{{minXLabel}</span>. I current ...

javascriptvue.js

How can we effectively streamline these if statements for better organization and efficiency?

Currently, I am dealing with a straightforward if condition structure and aiming to keep the code as DRY (Don't Repeat Yourself) as possible. I believe that I have achieved optimal dryness for my specific situation by utilizing object keys as pointers ...

javascriptnode.jssyntax

Dynamically remove a MongoDB entry with precision

I'm having trouble deleting an entry in MongoDB based on the id variable. Even when I pass the id as a parameter to the method, it doesn't seem to work. I've double-checked the variable inside the method and I'm confident that it has th ...

javascriptmongodbexpressmethodsbackend

What might be the reason for npm live-server to cease detecting file updates?

Everything was working perfectly on my system, but now I'm facing an issue. I have the live-server version 0.8.1 installed globally. npm install live-server -g However, when I start it, I no longer see the "Live reload enabled." message in the brow ...

javascriptservernpm-live-server

The css cropping issue with sprite image is not being resolved

I'm currently working on creating a sprite image for the bottom links on our media page, but I seem to be having trouble getting the image to crop correctly. Can anyone point out where I may be making a mistake? CSS .footer{ position:absolute; ...

htmlcssimagemenusprite

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

Sending the results from a Vue.js component to a text input field in HTML

Using vue.js and the v-for function to read QR codes has been a challenge for me. For example: <ul v-for="(scan,key) in scans" :key="key" > {{scan.content}} </ul> I need to extract the value inside {{scan.content}}, like an EmployeeID, but I ...

javascriptjqueryhtmlvue.jsqr-code

Personalized jQuery mask customization

After experimenting with a masking function that conceals numbers based on a specific pattern, I am now looking to make it more flexible for users. For instance, if a user types 123456789, the field will display as XXX-XX-6789. Currently, the pattern is ...

jquerycss

When you hover over the button, it seamlessly transitions to a

Previously, my button component was styled like this and it functioned properly: <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 ...

javascriptcssreactjstypescriptmaterial-ui

JavaScript Question: How can I extract the click value from a JavaScript visualization when displayed in a table?

I am working with a Hierarchical Edge Bundling visualization in JS. My goal is to have the name of the value displayed on the table when I click on it. Currently, I am facing an issue with retrieving the value dynamically. If I manually input a value, I c ...

javascriptjquerylinkerclickvisualization

Tips for incorporating unique styles to a component in ReactJS

Struggling to apply unique styles to a React Next.js component? Below is the code snippet for a button component: import styles from "./button.module.css"; const Button = props =>{ return( <div> <button className={styles.button}>{ ...

javascriptreactjsnext.jscomponents

Tips for locating an element beyond the page source with Puppeteer

My goal is to extract specific information from a webpage by utilizing this code snippet to target an element and retrieve certain values within it: const puppeteer = require('puppeteer'); function run (numberOfPages) { return new Promise(a ...

javascriptnode.jsweb-scrapingcss-selectorspuppeteer

How to install Typed.js without using Node.js

I'm currently working on a project that requires the JavaScript library typed.js, however, I am using the free webhost 000webhost which does not support Node.js. Since typed.js is typically installed using Yarn, NPM, or Bower - all of which require No ...

javascriptjquerynode.jstyped.js