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

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

javascripthtmlcss

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

htmlcss

Is there a way to prevent the node modules folder from being uploaded when deploying a React app on Github Pages?

Struggling with the lengthy upload time of my React app on Github Pages. Every attempt to upload the node modules folder feels like an eternity due to its numerous dependencies. I've considered uploading just the build folder (minified version), but i ...

javahtmlreactjsgithubnpm

Postback does not show updates made by JQuery

On Page_Load, I have two asp:BulletedLists - one is already filled with data while the other remains empty. Users have the ability to drag and drop <li>'s between these lists using the following function: function Move(element, source, target) { ...

c#jqueryhtmlasp.net

What is the best way to display two items side by side from a list of items in HTML?

I have a list of items that are displayed in `webView` with 4 elements per row. However, for `mobileView`, I would like to show only 2 elements in each row. Below is an example from my HTML file: <div class="row my-3 cust-heading" style="margin-left: 3 ...

htmlcss

Disable the ability to close the dialog box by clicking

this is my dialog <div *ngIf="visible" class="overlay" (click)="close()"> <div role="dialog" class="overlay-content"> <div class="modal-dialog" (click)="$event.stopPropagation()"> <!-- Modal content--> ...

javascripthtmltwitter-bootstrapangular

Incorporating a File Attachment within a JSON Structure

Can a file attachment be included in a JSON Object? I am working on an HTML Form with text field inputs and a file attachment, and I would like to send all this form data (including the file attachment) as a JSON Object to the server. Are there any specif ...

javahtmljsonfile

How can I extract the "href" attribute from an anchor tag using XPath?

I am working with HTML code that looks like this: <a href="/images/big_1.jpg" class="class-a"> <img class="class-img" src="/images/small_1.jpg"/> <span class="class-span"> <img src="/images/img_1.png"> </ ...

htmlparsingxpath

What is the best way to determine the number of subchildren within a parent div using JavaScript or jQuery?

Can anyone assist me with counting the number of child divs inside a parent div using JavaScript or jQuery? I'm not very experienced in these languages. Below is my code snippet: $(function () { var parent = document.getElementById('parent& ...

javascriptjqueryhtml

Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

Encountered a strange issue with the fixed header on my website under specific conditions: Using an iPhone 6+ in landscape mode. Using Safari with at least two tabs opened. The page has a fixed position header with html and body set to position: relative ...

ioscssmedia-queriesiphone-6-plus

An HTML/CSS component that dynamically adjusts its height at random intervals

My goal is to have the footer of my page occupy just one line in height. On occasion, when I open my page in a new browser tab, the footer ends up being two lines tall. However, if I simply reload the page within the same tab, everything appears as intende ...

csstwitter-bootstrap

Creating new components within A-frame

I've been attempting to implement the bubble function into my scene to generate a sphere, but unfortunately nothing is showing up. Even when I try creating a sphere without using the bubble function, it still doesn't appear in the scene. func ...

javascripthtmlaframe

"Hidden panels in Sencha Touch only respond to show() and hide() methods after a resize event

Check out this demonstration of a Sencha Touch app by visiting this link. The button located in the bottom-left corner is supposed to show or hide the menu panel on top of the "Location info goes here" bar, but it seems to be functioning in an unexpected m ...

javascripthtmlgoogle-chromesencha-touchextjs

What is the best way to conceal a row when a particular field is devoid of content?

Is it possible to hide an entire table row if a field is empty? For example: If a certain field is empty, I want the entire row to be hidden, either using JavaScript or jQuery. I have tried some methods but none of them fully hide the row. Is there a way ...

javascriptphpjqueryhtml

AJAX Form Submission for CommentingAJAX allows for seamless form submission

Currently facing an issue with a form submission that is not displaying comments without refreshing the page. When the submit button is clicked, it redirects to the top of the page without executing any actions - no insertion into the database and subseque ...

javascriptphphtmlajaxmysqli

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

javascriptjqueryhtmlcss

Is it possible to implement browser-specific CSS in Next JS without affecting other browsers?

Will Next JS automatically add all necessary browser prefixes to CSS styles defined with style jsx, or do I need to write the browser supports manually in my styles when using Next JS? transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); ...

cssnext.jswebkit

Unable to display background image on Webpage due to blank page issue while uploading it with HTML and CSS

I've been attempting to build a webpage with an image as the background, but I seem to be facing some issues. Instead of seeing the desired image, all I get is a blank white page. The folder named "images" is located in the same directory as my HTML a ...

htmlcss

Methods for passing JavaScript variables to PHP

I have encountered this problem on Stack Overflow before, but I couldn't find a solution that worked for me. I am using Codeigniter and have a form where users can rate a product. What I need to achieve is to insert the user's rating into the dat ...

javascriptphpjqueryhtmlcodeigniter

Starting the animation only when the slide is visible

Struggling to add animations dynamically as a HTML/CSS developer who avoids JS but uses jQuery occasionally? Sound familiar? Well, I have. Recently, I managed to create a CSS-3 animation for the images in a Bootstrap carousel. Check out the code below: ...

htmlcsstwitter-bootstrap