CODEWITHSUNDEEP
htmlcss
voiys
voiys

Reputation: 299

How do I align text inside a fixed element?

I'm working on a school project and I need to align the text inside my footer to the right side of the page.

I've tried using text-align, turning the whole thing into a flexbox and then aligning but it just won't work. This is my css: 

footer {
position: fixed;
z-index: 100;
bottom: 2%;
text-align: right;
}

anybody got some ideas about what's going on? Thanks in advance

EDIT: Someone asked for html, so here it is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="/mystyle.css">
  <title>MyPage</title>
</head>
<body>
  <iframe></iframe>
  <footer>MyName 2019</footer>
</body>
</html>

Upvotes: 0

Views: 70

Answers (2)

WhiteWolf
WhiteWolf

Reputation: 29

Here is a simple example:

.fixed {
  background-color: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
}
.elements {
   position: absolute;
   right: 0;
   bottom: 0;
}
<div class="fixed">
  <div class="elements">
    <p>Centered Elements</p>
  </div>
</div>

Here is the live demo: https://jsfiddle.net/Devel0per95/67rjmvw3/9/

Upvotes: 0

madhavsai bhushan
madhavsai bhushan

Reputation: 263

.footer {
    width:100%;
    position:fixed;
    background-color: red;
    z-index: 100;
    left: 0%;
    bottom: 2%;
    display: flex;
    justify-content: flex-end;
    /* text-align: right; */
}

Here is the demo: https://stackblitz.com/edit/angular-wuf4qg

Upvotes: 2

Related Questions