Jump to content

How to float a <div> always centered on the webpage ?


vmars316
 Share

Recommended Posts

Hello;

I want to float a <div> so that it is always centered on the webpage . 

How can I do this ?

<style>
body {
    background-color: #ebe8e4;
}

#flexBox-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: #fbe9d6;   
  text-align: center;
//  width: 100%;
}
</style>

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body>
  <div id="flexBox-container">
   <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
	<button id="back">Back</button>
   <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <button id="forward">Forward</button>
   <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
	<button id="refresh">Refresh</button>
   <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
	<button id="home">Home</button>
   <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <input id="url" style="width: 200px;"  type="url" value="http://vmars.us/KidSafeBrowser/"/>
   <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <button id="go">Go</button>
  </div>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

Thanks for your Help...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...