Middle alignment not functioning properly in vertical layout

Question

Middle alignment not functioning properly in vertical layout

vertical-align: middle is not behaving as expected.

A reference states the following:

The element should be positioned in the center of its parent element.

However, when examining the link below, "world" does not appear centered within the parent element.

.hello {
  font-size: 32px;
  background-color: hotpink;
}

.world {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

<p><span class="hello">Hello</span> <span class="world">world</span></p>

html css vertical-alignment

Answer 1

Answer №1

The first span in your content appears to be larger than the other spans, causing the size of the paragraph tag to adjust accordingly. To address this, I have added vertical-align: middle to both spans.

 .hello {
   font-size: 32px;
   background-color: hotpink;
 }

p span {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

Answer 2

The first span in your content appears to be larger than the other spans, causing the size of the paragraph tag to adjust accordingly. To address this, I have added vertical-align: middle to both spans.

 .hello {
   font-size: 32px;
   background-color: hotpink;
 }

p span {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

Answer 3

Answer №2

Give this code a try:

<!DOCTYPE html>
<html>
<head>
<style>

.hello {
  font-size: 32px;
  background-color: hotpink;
}
span{
  
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

</style>
</head>
<body>

<p><span class="hello">Hello</span> <span>world</span></p>

</body>
</html>

Answer 4

Give this code a try:

<!DOCTYPE html>
<html>
<head>
<style>

.hello {
  font-size: 32px;
  background-color: hotpink;
}
span{
  
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
}

</style>
</head>
<body>

<p><span class="hello">Hello</span> <span>world</span></p>

</body>
</html>

Answer 5

Answer №3

If you require the presence of a span within another span, it must be specifically nested in that manner. As explained:

The element is positioned at the center of its parent element

Therefore, it needs to be contained within the designated parent element, which appears to be the span in this scenario. However, if you view the p as the parent, then moving the class="hello" to the p tag would suffice.

p {
  background-color: orange;
}
.hello {
  font-size: 32px;
  background-color: hotpink;
}

.world {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
  display: table-cell;
}

<p><span class="hello">Hello <span class="world">world</span></span>
</p>

Answer 6

If you require the presence of a span within another span, it must be specifically nested in that manner. As explained:

The element is positioned at the center of its parent element

Therefore, it needs to be contained within the designated parent element, which appears to be the span in this scenario. However, if you view the p as the parent, then moving the class="hello" to the p tag would suffice.

p {
  background-color: orange;
}
.hello {
  font-size: 32px;
  background-color: hotpink;
}

.world {
  font-size: 20px;
  background-color: lime;
  vertical-align: middle;
  display: table-cell;
}

<p><span class="hello">Hello <span class="world">world</span></span>
</p>

Middle alignment not functioning properly in vertical layout

Answer №1

Answer №2

Answer №3

Similar questions

Chrome fails to load webfont upon page initialization

What is the best way to make the text align with the top of its designated space?

Press the button to reveal the table - jQuery/JavaScript

Organize your list with a single click using jQuery plunge

Tips for modifying and refreshing data in a live table with JQuery

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Flexible DIVs with a maximum width of 50% that adjust to different

Timer Does Not Appear to be Counting Down

What steps do I need to take in order for my web controls to show up on top of an activex

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

Are there ways to implement Vue.js transitions without directly setting the height in the code?

The function attached to the `click` event of `#cart-continue` is not invoking

Enhance User Experience - Automatically highlight the first element in Prime NG Menu when activated

Alert: The attempt to include_once(headerSite.php) has encountered an error as the file does not exist in the specified directory

Display the jQuery validation message in the final td cell of the table

Issue with Angular 6: Jquery unable to detect element when using *ngIf directive

Ensure the background image is optimized for viewing on screens of any size

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

Maintaining image ratio on the entire screen

Delete the child element if it is present in an HTML document