What could be causing my text to not be centered with CSS align-items?

.top-part {
    position: relative;
    display: flex;
    background:  rgba(51, 102, 255,0.7);
    width: 100%;
    height: 8cm;
    background-position: center;
    background-size: cover;
}

.not-content {
    display: flex;
    align-items: center; /* this should center the text horizontally */
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-family:'Consolas','Courier New','Trebuchet MS';
    color: white;
    line-height: .5cm;
    flex-wrap: wrap;
}

<section class="top-part">

        <div class="not-content">

              <h1><strong>BIG TEXT</strong></h1>
                
              <h4>TEXT</h4>

        </div>
        
</section>

i can't figure out what's causing my text not to be centered horizontally, maybe there's an issue with the CSS code regarding "align-items: center;"

htmlcssdjango

Answer №1

Using Flexbox might be unnecessary for your situation. Simply apply text-align: center; for the desired effect.

.not-content {
  text-align: center;
}
<div class="not-content">
  <h3>This is an H3 heading</h3>
  <h4>An H4 heading</h4>
</div>

However, the main issue you're facing is likely due to the flexbox container only expanding to fit its contents. This could be resolved by changing the top-part class from display: flex to display: block. I have highlighted this in Chrome developer tools to demonstrate how the size of the flex content region only accommodates the text.

https://i.sstatic.net/up7Mx.png

If you eliminate the display: flex declaration from the top-part class, it should meet your expectations.

Answer №2

To make the container 

<div class="not-content">
take up the entire width, simply add width: 100%; to its CSS properties:

.not-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Consolas", "Courier New", "Trebuchet MS";
  color: white;
  line-height: 0.5cm;
  flex-wrap: wrap;
  width: 100%;
}

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

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...

jquerycssbrowserdrop-down-menualignment

Confirm the input validity using jQuery for radio buttons, checkboxes, and dropdown menus

When it comes to validating input fields like text, email, radio, checkbox, and select, I have the following structure in my form: <fieldset> <div class="form-top"> <div class="form-bottom"> <div class="for ...

javascriptjqueryhtml

Easy peasy PHP AJAX HTML glitch

Struggling with a simple task that most would find easy, as a beginner in PHP and jQuery+Ajax: how can I update my index.html with different HTML code, requested through an Ajax call from a PHP file? index.html <!DOCTYPE html> <html> <head ...

phpjqueryhtmlajax

Adjusting jQuery tab content heights to maintain consistent height across tabs and prevent varying heights

I am currently working on a tabbed view that is very similar to the demo found at the following link: http://jsfiddle.net/syahrasi/us8uc/ $(document).ready(function() { $(".tabs-menu a").click(function(event) { event.preventDefault(); $(this).pare ...

jqueryhtmlcsstabs

What are the mechanics behind Django authorization decorators like the "login required" function?

I am seeking a deeper comprehension of the inner workings of the Django authorization decorators. While I have a basic understanding of decorators overall, I am struggling to grasp the specifics of the authorization decorators code. Is there a detailed b ...

pythondjangodjango-authentication

Ways to resolve issues with resizing div elements while waiting for JavaScript to load

Apologies for the lack of a clear title to describe my issue. My problem involves this snippet of code, where I am creating a label to show time to users. <div class="content"> <div class="container"> <div class="card"> < ...

javascriptjqueryhtmlcss

To get the jQuery show() function to work properly, you must invoke an alert immediately

When using jquery.show() to display a div, I was unable to see the display effect unless I included an alert after the show method, like so: JavaScript: $("#screenAsLayer").show(); $("#screenAsLayer_content").show(); alert("aa"); HTML: <div id="s ...

javascriptjqueryhtmlcss

The Django template fails to implement CSS styling

I am trying to apply text-align: justify and reduce the text width on a Django template file, but it seems that my CSS isn't working for only this specific element. I have no idea how to solve this issue even though my static files and direction are f ...

htmlcssdjangodjango-templates

Using Django and jQuery to retrieve a file and display a prompt for downloading the file in the browser

Previously, I had a question about passing files to the browser for download, which was easily achieved by passing strings created at the end of a function to an iframe's src attribute. Now, I have a more complex task at hand – I need to pass pre-e ...

jquerypythonhtmldjango

When a parent element uses the flex property and its child elements have no content, the flex child will expand

I am experiencing a peculiar issue that has left me puzzled. p { padding: 0; margin: 0; } .fc { display: flex; flex-direction: column; } .fc > article { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #000; ...

htmlcssflexbox

Creating custom components in React

At times, I find myself in need of a special UI component such as a multiple range slider. However, I have a preference for not relying on third-party libraries, so I usually opt to create the component myself. As time has passed, I have completely stopped ...

htmlreactjsformsredux

Generate interactive jQuery slideToggle containers that monitor user clicks via Google Analytics

I have been working on a PHP and mySql project where I need to retrieve a list of businesses from a database. Once I have the desired businesses, I want to display them consecutively inside their own "clickDiv" container using jQuery slideToggle to reveal ...

phpjqueryhtmlmysql

Is the table column width not aligning with the grid container width in bootstrap?

I've been grappling with trying to construct a table using Bootstrap 4 grid container. While everything from styling to alignment seems to be in place, there's one nagging issue: the table doesn't adhere to the grid container as anticipated. ...

htmlcssbootstrap-4

Tips on creating vertical stacked content utilizing CSS

Has anyone come across this game before? https://i.sstatic.net/hFX9o.png I am trying to stack each card in a column, here is my fiddle jsfiddle. In my scenario, I have cards wrapped in div elements with a maximum height. If a card exceeds this height, i ...

javascripthtmlcssbootstrap-4

The CSS transition will only be triggered when the class is turned on, not when it is turned off

Having some trouble with a transition effect involving multiple elements on a page. Specifically, I am working on a sliding side menu for the responsive top navigation menu. The goal is to have the relative body and a fixed header bar move to the right whe ...

jquerycsscss-transitions

Remove the ID, class, and other attributes from an HTML string using JavaScript for sanitization purposes

Can someone help me with sanitizing HTML text provided by a user? The HTML code in question is as follows: var htmlStr = `<p id="test" class="mydemo">TEhis is test</p> <pre class="css"> &lt;html> &lt;body cl ...

javascripthtml

Can you demonstrate how to assign a CSS class to a datalist?

I have run into an issue where I can't seem to control the styling of the items on my datalist. The external styling does not provide any vertical spacing between each item. Is there a way to add this spacing? <div id="cssmenu"> <ul> ...

c#htmlasp.netcss

Employing the CSS not selector within JavaScript

I am facing an issue where my form darkens with the screen every time I click a button to show it, using JavaScript. If I were using CSS, I know I could use the :not selector, but I need guidance on how to achieve this in JS. Can anyone assist me? Below i ...

javascripthtmlcss

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...

cssreactjs

Counting the number of characters without including HTML tags in C#

I am currently exploring methods to calculate the number of characters in a string, shorten the string, and then return it without including HTML tags in the character count. It's important that HTML tags are not counted because if the truncation poin ...

c#truncatecountinghtml