How To Align a Main Header and Secondary Header

Is there a way to align a header and sub-header using text-align: justify;? It doesn't seem to work for me, possibly because the parent is set to inline-block?

Check out my jsFiddle example: http://jsfiddle.net/9bnqab6n/1/

Here's the HTML code:

<div id="header">
    <div id="logo">
        <h1 class="logo">My Business</h1>
        <h3 class="logo">This Is What We Do</h3>
    </div>
</div>

And here's the CSS code:

h1, h3 {
    margin: 0;
    padding: 0;
    text-align: justify;
}
h1 {
    font-family: Arial;
    font-size: 1.75em;
}
h3 {
    font-family: Georgia;
    font-size: 1em;
}
.logo {
    text-align: justify;
}

Answer №1

Unfortunately, the use of text-align:justify is not effective when applied to a single line of text; its intended purpose is for styling paragraphs. To achieve the desired style for the .logo:after element, you can implement the following CSS:

h1, h3 {
    margin: 0;
    padding: 0;
    text-align: justify;
}

h1 {
    font-family: Arial;
    font-size: 1.75em;
}

h3 {
    font-family: Georgia;
    font-size: 1em;
}
.logo{
  text-align: justify;
}
.logo:after{
  content: "";
  display: inline-block;
  width: 100%;
}
<div id="header">
    <div id="logo">
        <h1 class="logo">My Business</h1>
        <h3 class="logo">This Is What We Do</h3>
    </div>
</div>

Answer №2

To make the adjustment in your stylesheet, modify the following:

.logo {
    text-align: justify;
}

by replacing it with:

.logo {
    display: inline;
}

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

What is the best way to trigger click events within a select dropdown using Angular?

I have implemented two buttons (month, year) that trigger different events. Now, I want to replace these buttons with a select element. Can you guide me on how to achieve this? Here is my current code: // Button implementation <button class="menu-butt ...

Incorporate dynamic rules into a CSS stylesheet

I am trying to dynamically add a rule to my CSS for each element. Each rule should have a different background-image and name. However, I seem to be encountering an issue where the dynamically added div is not linking to the dynamically added CSS rule. I&a ...

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

I'm encountering a strange issue with containers that have overflow:hidden and when the page URL includes an id. The content gets pushed up and becomes invisible. This problem arises when I apply padding and negative margin at the bottom to create equ ...

Linking for default and French page internationalizations

Currently, I am working on SEO for a multi-language website that includes English, French, and Spanish versions of the web pages. For example, the English pages are located at example.com/en and have English content as default. <link rel="alternate" hr ...

Font malfunctioning on Microsoft Edge and Internet Explorer

Apologies if this seems like a silly question, but I recently imported a font from my computer into a CSS file. While it displays correctly in Chrome, it's not working in Microsoft Edge or Internet Explorer. Unfortunately, I don't have access to ...

Struggling to locate element using Selenium in Python 3?

While using Selenium for WebScraping, I've encountered difficulty detecting an element using xpath, full xpath, id or text. <div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-list"> <div class=cbp-vm-options">...& ...

Guide on replacing the character "&" in PHP with ease

I am encountering an issue where some output on the page contains a space character written as "&nbsp;". I need to replace it back with a regular space. I attempted using str_replace("&nbsp"," ",$mystr) and even preg_replace("/(&nbsp;)/", " ", ...

The lack of vertical alignment in the table

Trying to do something really simple here and I'm a bit stuck. Currently working on a forum project, and surprisingly the backend is error-free (thanks to some questionable magic tricks), However, my current task is to display all subcategories using ...

Take out the username field from the registration form in Woocommerce

Is there a way to eliminate the username section from the registration form on woocommerce? I attempted to remove certain lines from the woocommerce/myaccount/login-form.php <?php if ('no' === get_option( 'woocommerce_registration_gene ...

Is there a way to disable certain CSS features in Chrome, like CSS grid, for testing purposes?

I'm exploring alternative layouts for my app in case CSS grid is not supported. Is there a way to disable features like CSS grid in Chrome or Canary? ...

How can CSS animations be implemented on a diagonal path?

I have developed a unique CSS animation that adds a shiny effect to text. Currently, the effect only works horizontally. I am interested in exploring options to change the direction of the animation to create a diagonal shine effect. Below is the code I a ...

Issues with html/css compatibility have been observed on IOS devices

Here's a puzzling situation that has me scratching my head. I have created an app used to manage an eye chart in a medical office. It's a simple interface where pressing the "20/20" button displays the 20/20 line on screen. Everything runs smooth ...

Flexible Columns with Bootstrap

After completing the construction of my website, my current focus is on making it responsive. My inquiry pertains to a specific page on my site that consists of 8 containers with full viewport height. These containers are arranged into two equal columns ...

Having trouble with Github pages' responsiveness on certain devices

The responsive view in the browser appears to be working correctly. Everything is functioning fine. However, when I switch to my Android phone, the alignment is off. I've tested it on multiple devices and the results are consistent. What could be cau ...

List using Bootstrap with a close button aligned to the right side

I'm currently working on creating elements with bootstrap, but I've hit a roadblock and could use some assistance in figuring out how to resolve it. The issue I'm facing is closely related to the HTML structure, here's an example: < ...

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...

Header Logo not Displaying on _Layout.cshtml in ASP.NET Core

Currently working on a project in Asp Net Core 6 with an application that consists of 2 areas. One issue I encountered is that when logging in with the default user, images display correctly. However, once the address bar changes to localhost:44316/Admin ...

Top jquery CSS selector for locating a table's colspan in Internet Explorer

Does anyone know a more efficient way to find the colspan of table cells in IE, specifically when it's other than 1? The current selector I'm using feels clunky. Any suggestions on how to improve this? if (isIE) { selector = "> tbody > ...

Cancel an AJAX request without interfering with the subsequent request

When working with a number input and the "onChange" event, I have come across an issue with my ajax request. Upon aborting the request, it seems to have a negative impact on subsequent requests. If I send just one request without aborting, everything runs ...

What is the best way to enclose an h2 with a designated class, along with the following two elements, inside a wrapper class?

Looking to select a specific block of code to wrap with a class using the jQuery .wrapAll method. I need to target the <h2> element and the two elements that follow it. Unfortunately, the elements before and after this block are inconsistent, ruling ...