Not able to move the button to the right of the page and the text to the center of the page-CodePudding

Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)

<div id="project-heading"  style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
            <span display="inline;" float = "center;" style="color: white; ">Visual Analysis of US Accidents Data  </span> <button position = "absolute;" background-color ="black;" color = "white;"  float ="right; display="inline-block;" padding-left = "100%;"  id="reset" onclick="reset">Reset</button>
        </div>
'''

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/j9dRz.png

CodePudding user response：

display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.

<h1>Only fixed syntax:</h1>
<div id="project-heading"  style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
  <span style = "display: inline; float : center; color: white;">
    Visual Analysis of US Accidents Data               
  </span> 
  <button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
    Reset
  </button>
</div>    

<h1>Fully fixed version</h1>
<div id="project-heading"  style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
  <span style = "display: inline; float : center; color: white;">
    Visual Analysis of US Accidents Data               
  </span> 
  <button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
     Reset
  </button>
</div>

CodePudding user response：

You have quite a few issues with your code, so let's clean them up and break down what's happening:

First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )

You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.

If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.

Let me know if you need any additional help or explanations :)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: lightgrey;
}

#project-heading {
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  padding-top: 5px;
  text-align: center;
}

.title {
  display: inline;
  float: center;
  color: white;
}

.btn {
  position: absolute;
  right: 10px;
  background-color: black;
  color: white;
  display: inline-block;
}

<div id="project-heading">
  <span >Visual Analysis of US Accidents Data </span>
  <button  id="reset" onclick="reset">Reset</button>
</div>