Align text divs vertically and ensure font size is responsive within a container div

Within this designated div, I have included:

https://i.stack.imgur.com/j099H.png

In an attempt to ensure that the font size of the text adjusts responsively, I implemented the following code:

font-size:calc(xx + 1.5vw);

However, upon resizing the screen, I noticed that the headers were not vertically aligned as desired:

https://i.stack.imgur.com/jl7KT.png

Here is the HTML snippet:

<div id="topsection">
<div id="header1">HEADER 1</div>
<div id="header2">Header 2</div>
</div>

And here is the corresponding CSS code:

#header1 {
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}

#header2 {
color: #fff;
margin-left:220px;
font-size:calc(9px + 1.5vw);
}

#topsection {
background-color:#222939;
width:100%;
height:75px;
z-index:1;
position:absolute;
top:10px;
left:0;
color:white;
}

To address the issue with vertical alignment, I made adjustments to the CSS for the headers, as shown below:

#header1 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}

#header2 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(9px + 1.3vw);
color: #fff;
}

Unfortunately, the result now appears like this:

https://i.stack.imgur.com/2wOoi.png

htmlcssvertical-alignmentfont-size

Answer №1

If you want to center a content div in the middle, follow the example below. This has only been tested on Chrome.

.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;


}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {


line-height:1;

font-size:calc(20px + 1.5vw);
color:#fff;
}

.toolbar .subtitle {


line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
 <div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>

Here is the final code:

<!DOCTYPE html>
<html>
<head>
    <style>
        .toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}

.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
    </style>

    </head>
<body>
     <div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
</body>
</html>

Answer №2

There seems to be a problem with the alignment of the black glyph characters within the glyph block.

Upon closer inspection, it appears that there is extra space on the left side of the glyph block before the glyph character begins.

h1,
h3 {
  margin: 0;
  margin-bottom: 1px;
  margin-left: 150px;
  font-family: monospace;
}
h1 {
  font-size: 144px;
}
h3 {
  font-size: 72px;
}
span {
  background: red;
}
<H1><span>H</span></H1>
<H3><span>H</span></H3>

This issue is intentional and part of the font design process to prevent letters from clustering together automatically.

The amount of spacing needed varies depending on the font size and individual typeface, making it impossible to have a universal value for alignment.

What may work for one font will not necessarily work for another.

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

Creating a dynamic animation effect on a div with a changing number of child elements

Currently, I am utilizing the nganimate library and have implemented an animation that affects the max-height property of a div. Here is a snippet of my code: CSS .sublist.ng-hide { max-height: 0; } .sublist { max-height: 1300px; overflow: hidden; ...

cssangularjsng-animate

What is the best way to design a personalized scrollbar for a stationary sidebar within a flexible Twitter Bootstrap design?

I recently implemented a fluid layout on my article page using Twitter Bootstrap. One of the features I added was a fixed top navigation bar that stays in place when it reaches the top of the browser window. I found a helpful tutorial on how to achieve thi ...

jquerycsstwitter-bootstrap

Ensure that the width of the table rows (tr) matches the width of the table header

I'm currently working on implementing a sticky table header. The issue I'm facing is that the width of tableHeaderRow does not match the width of tableHeader. Steps taken for creating sticky header: Make an Ajax call to populate the table with ...

javascriptjqueryhtmlcsstwitter-bootstrap

Activate the trigger event when the popover is activated remotely

I am facing a unique situation on my website where I have multiple popovers (pop1), (pop2), (pop3) that are triggered in sequence when the "Next" button is clicked. These popovers appear one after the other without direct access to them individually. If y ...

jqueryhtmlcsstwitter-bootstrappopover

HTML/CSS: Maintain Hover-Over Pop Up Boxes in Position Until Another Element is Hovered Over

Seeking HTML code to maintain a hover-over pop-up box in position on an image map until another section of the image map is hovered over. For example, refer to my code below - when hovering over a country on the map, a pop-up box with information about a ...

htmlcss

How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...

htmlcssinternet-explorer

Steps for accessing specific menu div on a new tab

I'm facing an issue with my one page website. Whenever I click on a menu item, it directs me to a specific div tag on the page. However, if I right-click on a menu item and select 'open in new tab', it opens the URL "www.mysite.com/#" instea ...

javascriptjqueryhtml

The collapsible menu is not expanding properly after a click event due to the small size of

My website has a menu placed in the header with a background color. When resizing the page (max width 1044 px), it switches to a mobile menu, but the div holding the menu and anchors is too small compared to the header. Is there a solution to this issue? ...

html

Add a JSON file containing an image path as a value into a CSS background property

I currently have a MongoDB database containing documents with 'img' values structured as follows: "img": "../folder/img.jpg" Would it be feasible to utilize this string in my CSS for modifying the background image? This is essential because I n ...

javascriptcssjsonmongodb

How to automatically close a JavaScript popup once a form is submitted and refresh the parent page

I am facing an issue with a popup on my website. I have a separate page called math.ejs that pops up when a button is pressed on the index.ejs page. However, after clicking the submit Ok button in the math.ejs popup, I want it to close and display the calc ...

javascripthtmlnode.jsexpress

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this? Here's the code snippet I&a ...

javascriptcssreactjsmaterial-ui

ExtJS web displays appear differently when viewed on Chrome's toggle device mode versus a mobile browser

Greetings, I have been working on developing a web application that can be accessed through a mobile browser. Initially, I created the web application and tested it in mobile mode using Chrome's simulation feature. However, when I tried accessing th ...

javascriptcssextjsbrowserextjs5

Changing the background color completely

Need help with CSS! I have two divs, one with a background color of #000 and the other with a transparent PNG image as the background. I want to override the background color with transparency from the PNG file so that the background doesn't cover th ...

htmlcss

Modification in background when PNG image is hovered upon

Having an issue in Chrome that doesn't occur in Firefox. When hovering over a PNG within a carousel plugin or dragging an element with Jquery, the hover image briefly distorts the background. Looking for a solution to improve user experience. Let me k ...

cssgoogle-chromehoverpng

Is it possible for search engines like google to index Javascript content that is stored within divs and loaded onto the page?

My website utilizes JavaScript to dynamically add content to div elements, like so: <script> //This content is generated by PHP var contents = [ "Item 1", "Item 2" ]; //Display the first item document.getElementById( "item" ).textCo ...

javascripthtmldynamicseogoogle-search

Aligning Elements in the CSS Bootstrap Grid

Struggling to achieve perfect center alignment of an HTML element using the Bootstrap grid framework. Here's the current code: <div id="rentals" class="container pb-4"> <div class="row pt-5 mt-5 mb-4"> ...

htmlcssbootstrap-4grid

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

javascripthtmlcss

Spacing between Div tags

Struggling with a tricky HTML cross-browser problem. The site was built by multiple people, making it quite messy, but needs to go live as soon as possible! Each of the 4 page layouts on the site are different and handled by separate classes. However, whe ...

csscross-browserspaces

Invisible Thinglink image revealed upon resizing browser

I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...

javascripthtmlcssajax

Capturing a variety of input values from a form and storing them in an array

I have a form with several input fields like this: <input type="text" name="name[]" value=""> <input type="text" name="name[]" value=""> <input type="text" name="name[]" value=""> I am attempting to submit the form and store those value ...

phphtmlsqlforms