What is the best way to center text within a content wrapper?

HTML

 <div class="container--wrap">
        <div id="rtitle">
          <p id="ptitle" style="color: #D8DCE6; font-size: 30px; text-align: center; padding-top: 15px; font-weight: bolder; margin-bottom: 0;">INFO
            <span id="fas" class="fas fa-info-circle w3-medium"></span></p>
        </div>
      </div>

CSS

#rtitle {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    }

    #fas {
      font-size: 30px;
      display: inline-block;
      vertical-align: middle;
    }

    #ptitle {
      vertical-align: middle;
      display: inline-block;
    }
    .container--wrap {
      background-color: #1B2435;
      border-radius: 15px;
      margin: 5px;
      overflow: hidden;
      justify-content: stretch;
      align-items: flex-end;
    }

The elements appear misaligned to the left, and I'm seeking guidance on how to properly align them. Can anyone provide assistance?

Your help is greatly appreciated - thank you!

Answer №1

Implement flexbox:

To center elements, simply apply the following CSS:

    display: flex;
    justify-content: center;

on the .container--wrap class.

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

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Within a large application, I am managing a micro site and looking to implement tertiary navigation with an active state for pages. This involves inserting a single html blob into multiple pages. My goal is to use an active class to highlight the page in ...

Resolving issues with a countdown timer coming to a halt

After creating a countdown timer to show 45 seconds on the screen, I attempted to control it using two buttons with JavaScript's onclick function. One button is meant to start the timer while the other stops it. While I was successful in starting the ...

Is it possible to execute our webpack (UI) build directly in a web browser without the need for a server?

Is it possible to run the build file bundle.js directly in the browser when using a reactjs setup with webpack dev server and webpack build? Also, when we deploy the build on the cloud, what exactly happens and how does our application run? ...

Having trouble with jQuery's find() function not working in conjunction with prev()?

I'm in need of some assistance because I think I may be approaching this the wrong way. Here is a link to the jsfiddle I have created: https://jsfiddle.net/m35o8jjL/2/ Below is the HTML code snippet: $( ".layered_subtitle_heading" ).click(function ...

Steps for resolving the CSS problem with the dynamic jquery category filter

I have developed a dynamic jquery category filter, but when I choose an option, the search results page displays content with unwanted spaces between them. It seems like there is excessive distance between each piece of content. $(document).ready(functi ...

Show material-ui cards in a row side by side

I attempted to showcase cards within a mapping loop while also utilizing the Grid in this manner. <div className={classes.root}> {data.tableData.childRows.map((el: any, idx: number) => { return ( &l ...

Using Custom .woff Format Fonts in Sendgrid: A Guide

Having trouble with implementing custom fonts in Sendgrid. While Google fonts work fine, the custom .woff format font doesn't seem to cooperate. I've attempted three solutions below. Solution number 1 shows up in the Preview tab but not in the em ...

Is there a way to have the menu displayed on a single line and consistently centered?

I am working on a menu that needs to stay centered at the top of the screen, with a consistent appearance and just one line, regardless of the screen width. However, I'm encountering an issue where the menu mysteriously transitions into a two-line for ...

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

There are times when I notice that a website's URL is structured like this: www.website.com/index.php while other times it appears like this: www.website.com/index/ What is the reason for the absence of a .php or .html extension in the second URL? ...

How can I create a button that prints the page content and then sends it to the backend using JavaScript for submission?

Is there a way to print content from a page and then submit form data to make changes to a backed database using just one button? I've attempted to include the print action within an on-click function, but it does not submit the form after printing. ...

How can I insert PHP code within the style attribute of a div tag?

I tried implementing this code, but unfortunately it's not functioning properly. My goal is to take user-defined width and height inputs in PHP and use them to generate a shape. echo "<div style='width:<?php $sirina?>;height: <?php $v ...

Adjust the background hue and opacity when incorporating a "modal div"

Currently, I have a page where a hidden div appears at some point to display a form for inputting data. This could be considered a modal div. My goal is to darken the rest of the page and only allow interaction with this specific div. I want the backgroun ...

I have not made any changes to the <div> tag with my CSS or JavaScript coding

Click here to see the problem I am facing on JSFiddle. I am trying to create a loading screen that will slide up after a few seconds using jQuery. Although I am familiar with HTML, JavaScript, and CSS, I am still new to jQuery. I have a feeling that the so ...

There seems to be a problem with displaying two div elements side by side using Html/CSS

Recently, I've delved into the world of html/css/javascript just for fun. I've encountered a little roadblock and I could use some help. In my html code, I'm trying to display two div elements on the same line but for some reason, it's ...

Several levels piled one on top of the other

I'm in the process of designing a section for a webpage using Bootstrap 3.0, and I want to layer three divs or sections on top of each other. The stacking order should be as follows: background "squares," footer, and foreground "squares" with images. ...

Using v-if within v-for to showcase a list of items in a dual-column format

I apologize for reiterating this, as I have noticed that many questions similar to mine have been asked multiple times. Here are the ones that almost helped me and why they fell short: This specific question advised against performing calculations within ...

Attempting to create a functional action listener for a deck of cards game

I'm currently working on a game and want to make an image appear blank when clicked on, to simulate it disappearing. Specifically, this is for a tri peaks solitaire game. I have a function that tests the validity of playing a card, but I'm strugg ...

Problem with alternating row colors in my table

Trying to add some style to my table on the webpage by alternating row colors, but I'm running into some issues. I've followed tutorials and tried using different CSS selectors like nth-of-type(even), nth-of-type(2n+0), and nth-of-type(odd). Howe ...

What is the process for ensuring that an image is set as the submit button in an HTML form on IE 7?

My HTML form is designed with an action on a PHP script, and the submit button displays a custom image instead of the default grey. While this code works perfectly in Chrome, it fails to function properly in Internet Explorer 7. Do you have any suggestions ...