Picking an item for alignment at the center with flexbox styling

What was the reason for specifying .footer-background to have a display: flex property in order to center the .copyright-text? Why did setting display: flex on .footer not achieve the desired result?

.footer-background {
  background-color: #00008B;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-text {
  color: #fff;
}

.container {
max-width: 1200px;
padding: 0 48px;
margin: 0 auto;
}
<div class="footer-background">
  <footer class="container footer">
    <p class="copyright-text">Copyright &copy; The Odin Project 2021</p>
  </footer>
</div>

htmlcssflexbox

Answer №1

To add flexibility to the footer, consider implementing the display: flex; property on the footer itself. By applying the flex property to the .footer-background class, the footer element will inherit this flexibility.

When flex is applied to an element, it directly impacts its child elements, regardless of their content. This means that any children of the element will also exhibit flexible behavior.

Answer №2

Sometimes, you may need to adjust the CSS properties of .footer-background and .footer to center the text in .copyright-text. If you set .footer-background to display: flex or if you make .footer a flex container with display: flex, the text will be centered.

<div class="footer-background">
      <footer class="container footer">
        <p class="copyright-text">Copyright &copy; The Odin Project 2021</p>
      </footer>
</div>

However, instead of using:

.footer {
  height: 50px;
  display:flex;
  align-items:center;
  justify-content: center;
}

.copyright-text {
  color: #f9faf8;
}

You can achieve the same result by simply adding text-align: center; to the .footer class. This will centrally align the text without the need for flex properties.

.footer {
  height: 50px;
  text-align: center;
}

.copyright-text {
  color: #f9faf8;
}

Answer №3

To achieve your desired layout, simply add display:flex to the footer element

.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copyright-text {
  color: #000000;
}
<div>
  <footer class="footer">
    <p class="copyright-text">Copyright &copy; The Odin Project 2021</p>
  </footer>
</div>

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

jquery deleting the parent container of a child element

I have been attempting to eliminate the parent element of the label associated with the attribute record_type. Below is the HTML content: <div id="append"> <div class="col-md-6 form-group hide_fields" style="display: block;"> <l ...

jqueryhtmlparent

Set a div to have both absolute positioning and sticky behavior

Looking to create a div ("profilemenu") that pops out on the right side of the page triggered by a button (I'll handle this part). I want it to have a sticky attribute, but positioning has been tricky. Using position: absolute works for proper placeme ...

htmlcss

Anticipating the arrival of the requested data while utilizing Ajax sending

Greetings, I'm currently utilizing JavaScript to send a request and receive a response from the server. xxmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); myotherMethod(); I am looking for a way to ensure that the next set of instructions ar ...

javascriptjqueryhtmlajax

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

javascriptjqueryhtmlsearch

What is the reason for the malfunctioning of this button upon clicking?

Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...

javascripthtmlcss

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Currently, I am attempting to extract the CSS and JS code of an image reveal animation that is part of a static HTML page: https://i.stack.imgur.com/bnmaO.gif The challenge lies in the fact that the desired effect is one among many showcased image animat ...

javascriptjqueryhtmlcss

Discover the method to adjust the position of elements, such as images, using radio buttons

I have an image positioned in a container along with 3 radio buttons. I want to make additional images appear over the main image when specific radio buttons are selected. Each button will trigger different positions for the additional images. So far, thi ...

javascriptjqueryhtmlcss

Troubleshooting: Why is my JPG Image not displaying in React JS?

I've encountered an issue while trying to set a background image for a div. Some images display correctly, while others do not. I attempted various methods such as directly specifying the image path in the background-image property in CSS, importing ...

cssreactjs

How can I incorporate a counter into my ng-repeat loop in Angular?

Do you know where I can find documentation on adding a numbered count to each item returned by an ng-repeat in Angular? This is not like assigning an Id, but more like, if 4 items are returned, each JSON object could include a number before the data. Her ...

javascripthtmlangularjsjson

Using $app->render() in Slim PHP allows you to specify the relative path to external dependencies

When rendering an actual HTML site that includes external dependencies like JavaScript and CSS using PHP, there may be issues with resolving the dependency paths when using methods such as $app->render("./somewhere/index.html") or simply echoing out the ...

phphtmlrestslim

"Want to make a phone call with an extension? Just click here

The issue at hand is rather straightforward. Is there a way to create a link for mobile browsers that would automatically dial a phone number and input an extension without requiring any action from the user? I am familiar with using tel:, as well as spe ...

androidhtmltwilio

How to customize Material UI Autocomplete options background color

Is there a way to change the background color of the dropdown options in my Material UI Autocomplete component? I've checked out some resources, but they only explain how to use the renderOption prop to modify the option text itself, resulting in a a ...

cssreactjstypescriptmaterial-ui

In a responsive layout, a floating div refuses to adhere to the left alignment

I am working on a dynamic list using ASP:REPEATER with floating divs aligned to the left. The current layout is as follows: +---------------------+ +---------------------+ +---------------------+ | | | | | ...

htmlcssresponsive-designcss-float

BorderWoocommerce

Something odd has appeared around my shopping cart total ("WARENKORB SUMME") today. Could you please take a look at the screenshot below? Any idea how to remove it? This is for a Wordpress/WooCommerce store. I haven't made any recent changes - I su ...

csswordpresswoocommerce

What is the best way to target a class within a span using CSS?

I need help with hiding an icon from the mobile menu. I am unsure about how to target this specific class within the menu structure. <a class="funiter-menu-item-title" title="Nieuw">Nieuw<span class="icon fa fa-chevron-down"></span>< ...

htmlcssclassmobile

<div><!-- including: unknown --></div>

Need some assistance with this issue. The ng-include path I am using is "http://localhost:8080/coffeeprojects/calc.html". I tested the path and it seems to be working. However, despite organizing the files and improving the path as suggested in some resp ...

javascriptjqueryhtmlangularjscoffeescript

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

The full height of the image cannot be captured by html2canvas

It baffles me that html2canvas is failing to capture the full height of the div. html2canvas($container, { height: $container.height(), onrendered: function(canvas) { var data = canvas.toDataURL('image/png'); ...

javascriptjqueryhtmlcsshtml2canvas

Customize DataTables selector by modifying its frame, font, and alignment

I'm experiencing issues with customizing the page selector in DataTables. Although I managed to change the background color to black, the frame around it remains blue. The font color of unselected pages and the "Next" button also do not reflect the c ...

jqueryhtmlcssdatatables

Unlock the power of Bootstrap CDN with these easy steps!

I am currently trying to incorporate a CDN for Bootstrap in order to enhance the performance of my website. Surprisingly, directly referencing the CSS works perfectly fine but using the CDN does not. Could someone provide me with guidance on how to resolv ...

htmlcsstwitter-bootstrapcdn