When applying a vertical-align property to both an anchor tag and a button with the same class, why is the span also aligned to the top?

Why is the span tag aligning to the top when I have only applied properties to the .btn class elements, and not targeted it directly?

.btns {
  text-align: center;
}

.btn {
  text-decoration: none;
  border: 1px solid black;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin: 5px;
  padding: 5px;
  height: 100px;
  width: 500px;
  line-height: 2em;
  vertical-align: top;
}
<div class="btns">
  <span>Lorem ipsum dolor sit amet.</span>
  <a href="https://www.google.com" class="btn" id="ggl">button1</a>
  <button class="btn" id="fb">button2</button>
</div>

htmlcssbuttonalignment

Answer №1

Span elements act as inline elements, meaning they only occupy the necessary space for display. Height and other height-related CSS properties cannot be applied to them. For such functionalities, it is recommended to use a block element like a div.

To maintain all elements on the same line as shown in the example, utilizing a flexbox layout would be beneficial.

Learn more about flexbox here: MDN Docs for Flexbox

Further information on Inline elements can be found here: MDN Docs for Inline content

.btns {
  text-align: center;
  display: flex;
}

.lorem {
  display: flex;
  align-items: center;
}

.btn {
  text-decoration: none;
  border: 1px solid black;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  margin: 5px;
  padding: 5px;
  height: 100px;
  width: 500px;
  line-height: 2em;
  vertical-align: top;
}
<div class="btns">
  <div class="lorem">Lorem ipsum dolor sit amet.</div>
  <a href="https://www.google.com" class="btn" id="ggl">button1</a>
  <button class="btn" id="fb">button2</button>
</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

Utilizing absolute and relative positioning for setting up a flexible sidebar layout

I'm finding myself a bit puzzled when it comes to using Absolute and Relative positioning. In essence, I have a sidebar with about 4 divs in it. My goal is for div 3 to stay in the same position on every page, even if div 1 or div 2 are missing and c ...

csscss-position

Adaptable HTML design with alignment features

Here is the structure I am working with: <style> #main { max-width: 500px; margin: 0 auto; overflow: hidden; border: 1px solid red; } #container{ margin-right: -50px; } .block{ display: inline-block; width: 100px; height: 100px; border: 1px solid gr ...

htmlcss

Changing the Color of Hamburger Menu Lines in Bootstrap

How can I change the color of the hamburger menu icon's lines for medium and smaller screen sizes? I have attempted changing it through style attributes and using !important in my CSS file, but so far nothing has been successful. ...

cssbootstrap-5hamburger-menu

On what occasion is a DOM element considered "prepared"?

Here's a question that might make you think twice: $(document).ready(function() { }); Sometimes, the simplest questions lead to interesting discussions. Imagine having a list of elements like this: <body> <p>Paragraph</p> < ...

javascriptjqueryhtml

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

cssangularsass

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

phpjqueryhtmlajaxjson

Having trouble with clearing divs function not working as expected

I'm facing a challenge in properly aligning 3 div elements without resorting to adding padding at the bottom of the wrapping div, which isn't the most practical solution. Check out the issue demo here How would you suggest addressing this parti ...

htmlcss

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

javascripthtmlangulartypescriptforms

Possible revised text: "Exploring methods for verifying elements within a div using Selenium

I have a situation where I need to verify elements within a div by using the following xpaths. The xpath for each item is as follows: Item 1:- //*[@id='huc-last-upsell-rows']/div[1]/div[2]/div[1]/div/div/a/img Item 2:- //*[@id='huc-last-u ...

javascripthtmlselenium

What are the steps to separate Bootstrap 5 from other frameworks?

Is there a way to apply bootstrap-5 styles only to a specific block or page? Can someone provide guidance on isolating bootstrap 5 either for the entire page or in a specific area? ...

htmlsasslessbootstrap-5

Getting the content inside a div tag with selenium in python

https://i.sstatic.net/OrWZ2.png Is there a way to retrieve the content within the specified div tag? I attempted copying and pasting the xpath, but when attempting to print the contents of the div, it did not work. div = driver.find_element_by_xpath(&apo ...

pythonhtmlcssselenium

Discrepancies in button padding across desktop and mobile platforms

I have created a sample button and included a jsfiddle link to showcase the code. Due to the font properties of the specific font I'm using, I had to adjust the padding values differently for the top and bottom of the text to achieve a vertically cent ...

htmlcss

What is the best way to vertically flip a background image that is repeating along the y axis in CSS?

I am in the process of developing a mobile web app and I need assistance with flipping the background image when it repeats along the y-axis. Can someone guide me on how to achieve this using CSS or JavaScript? https://i.stack.imgur.com/b107V.jpg var el ...

javascripthtmlcss

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Looking to add a unique touch to my React project with a shadow effect resembling an arch shape at the top of an image using Tailwind CSS. The ultimate goal is to create a semi-transparent arch-shaped shadow covering the top portion of the image, similar t ...

cssreactjsnext.jstailwind-css

Bootstrap Card breaking out from the confines of its parent container

Attempting to replicate Bootstrap's Cards example in my project, I noticed that the top margin of each Card extends beyond the parent element, a border div. If you need more information on how to utilize Card, refer to Bootstrap's documentation ...

htmlcssbootstrap-5

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

htmlangularangular-material

Modify the position of the CSS background for the Y-axis using jQuery

Let's consider a scenario with the following table: <table> <tr> <td class="t"></td> <td class="e"></td> <td class="s"></td> <td class="t"></td> </ ...

javascriptjqueryhtmlcsssprite-sheet

Implementing a custom loader screen in jQuery Mobile instead of displaying an error page while loading

I am in the process of developing a hybrid mobile application using Intel XDK and jQuery Mobile for the user interface. One challenge I encountered is related to an ajax form submission, which involves two logins and the use of tabs (2). Initially, I focus ...

htmljquery-mobileloader

Utilize jQuery to encase the final word of a paragraph within span tags

Greetings! Consider the following HTML snippet: <p>Phasellus sit amet auctor velit, ac egestas augue.</p> I am interested in enclosing the last word within span tags to achieve the following result: <p>Phasellus sit amet auctor velit, ...

jqueryhtml

Unable to find '.file.scss' in the directory '../pages'

I am currently in the process of migrating my Ionic 3 app to version 4. However, I have encountered an issue where some pages are not recognizing the SCSS file from the TypeScript component. @Component({ selector: 'car-id', templateUrl: &apo ...

cssangulartypescriptionic4