What is the best way to center my element?

I have been struggling to center my <button> element. Despite trying various methods like using padding-left:50%, Transformation, the button still refuses to align in the middle. My goal is to position the button below the well, perfectly centered.

$(document).ready(function() {
  var content="";
  $("#click").click(function() {
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
     content=key[0].content + "<p>— " + key[0].title + "</p>";
      $("#quote-form").html(content);
      console.log(content);
    });
    
    $("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
     
  });
 
});
.position-message{
  margin-left: 25%;
  margin-right:25%;
  margin-top:10%;
}

div.background{
  background-color: rgba(245,245,245,0.1);
  border-radius:10%;
  padding-bottom: 5%;
}

#button-prop{
  /*transformation : translateX(-50%); */
  position :absolute;
  padding-left : 50%;
   /*-webkit-transform: translateX(-50%); 
  -moz-transform: translateX(-50%); 
  -ms-transform: translateX(-50%); 
  -o-transform: translateX(-50%); */
}
.quote-shape{
  border-radius: 10%;
 
}

#page{
  margin-left: 5%;
  margin-right: 5%;
  margin-top:2%;
  margin-bottom:2%; 
  width: 1200px;
  height: 450px;
  max-height: 450px;
  
}
#page-background{
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}

#share {
        
        height:30px;
        width: 80px; 
      }
.space-from-quote{
  padding-top: 2%;
}
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <Title>Click to get quotes</Title>
</head>

<body id="page-background">
    <div class="well background" id="page">
        <div class="fixed-width">
            <div id="quote" class="position-message"> 
             <span><p id="quote-form"></p></span>
            </div>
        <!--<div class="row" id="button-shape">
<div id="share" class="col">
         <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
            <i class="fa fa-facebook-official"></i> Share
        </a> 
          </div>-->
        </div>
   </div>

   <button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle" ><i class="fa fa-refresh fa-2x"></i>
</button>

 
</body>

</html>

javascriptjqueryhtmlcss

Answer №1

If the Bootstrap framework is currently in use, one option to consider is applying the .text-center utility class to a parent element of the .btn element in question. Here's an example:

<div class="text-center">
  <button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle">
    <i class="fa fa-refresh fa-2x"></i>
  </button>
</div>

Showcasing the Code Snippet:

$(document).ready(function() {
  var content = "";
  $("#click").click(function() {
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
      content = key[0].content + "<p>— " + key[0].title + "</p>";
      $("#quote-form").html(content);
      console.log(content);
    });

    $("#quote-form").css({
      "font-family": "lucida console",
      "font-size": "20px",
      "color": "rgb(255,255,150)"
    });

  });

});
.position-message {
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 10%;
}

div.background {
  background-color: rgba(245, 245, 245, 0.1);
  border-radius: 10%;
  padding-bottom: 5%;
}

#button-prop {
  /*transformation : translateX(-50%); */
  position: absolute;
  padding-left: 50%;
  /*-webkit-transform: translateX(-50%); 
  -moz-transform: translateX(-50%); 
  -ms-transform: translateX(-50%); 
  -o-transform: translateX(-50%); */
}

.quote-shape {
  border-radius: 10%;
}

#page {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
  margin-bottom: 2%;
  width: 1200px;
  height: 450px;
  max-height: 450px;
}

#page-background {
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}

#share {
  height: 30px;
  width: 80px;
}

.space-from-quote {
  padding-top: 2%;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <Title>Click to get quotes</Title>
</head>

<body id="page-background">
  <div class="well background" id="page">
    <div class="fixed-width">
      <div id="quote" class="position-message">
        <span><p id="quote-form"></p></span>
      </div>
      <!--<div class="row" id="button-shape">
<div id="share" class="col">
         <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
            <i class="fa fa-facebook-official"></i> Share
        </a> 
          </div>-->
    </div>
  </div>

  <div class="text-center">
    <button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle">
      <i class="fa fa-refresh fa-2x"></i>
    </button>
  </div>


</body>

</html>

Answer №2

#button-prop{
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

Use this code to center align your button on the page

Answer №3

Here is a code snippet that will help you center the refresh button on your page:

$(document).ready(function() {
  var content = "";
  $("#click").click(function() {
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
      content = key[0].content + "<p>— " + key[0].title + "</p>";
      $("#quote-form").html(content);
      console.log(content);
    });

    $("#quote-form").css({
      "font-family": "lucida console",
      "font-size": "20px",
      "color": "rgb(255,255,150)"
    });

  });

});
.position-message {
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 10%;
}

div.background {
  background-color: rgba(245, 245, 245, 0.1);
  border-radius: 10%;
  padding-bottom: 5%;
}

.wrapper {
  text-align: center;
}

#button-prop {
  position: absolute;
  top: 50%;
}

.quote-shape {
  border-radius: 10%;
}

#page {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
  margin-bottom: 2%;
  width: 1200px;
  height: 450px;
  max-height: 450px;
}

#page-background {
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}

#share {
  height: 30px;
  width: 80px;
}

.space-from-quote {
  padding-top: 2%;
}
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <Title>Click to get quotes</Title>
</head>

<body id="page-background">
  <div class="well background" id="page">
    <div class="fixed-width">
      <div id="quote" class="position-message">
        <span><p id="quote-form"></p></span>
      </div>
      <div class="wrapper">
        <button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
</button>

      </div>

    </div>
  </div>

</body>

</html>

Answer №4

To center your button, simply place it inside a div and add the style="text-align: center;" attribute. Your HTML code will look like this:

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <Title>Click to get quotes</Title>
</head>

<body id="page-background">
    <div class="well background" id="page">
        <div class="fixed-width">
            <div id="quote" class="position-message">
             <span><p id="quote-form"></p></span>
            </div>
        <!--<div class="row" id="button-shape">
        <div id="share" class="col">
         <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
            <i class="fa fa-facebook-official"></i> Share
        </a>
          </div>-->
        </div>
       </div>
<div style="text-align: center;">
       <button type="button" id="click button-prop" class="btn btn-outline-secondary btn-circle" ><i class="fa fa-refresh fa-2x" style =""></i>

</button>
</div>

</body>

</html>

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

Using AngularJS to bind elements within elements

Feel like I might be overlooking a simple solution here, but I'm facing an issue: <h4 ng-bind="example.heading"> <small ng-bind="example.subheading"></small> </h4> This code doesn't seem to work - if ng-bind replaces ...

javascriptangularjsng-bind

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

javascriptnode.jspostgresql

Using AngularJS to bind a model within ng-repeat in a custom directive

Currently, I am attempting to bind a model from inside an ng-repeat within a directive to the outer controller. In the outer controller, there is a variable that I would like to bind, as shown below: //in the directive scope filterArray: '=' ...

javascriptangularjs

What is the best way to display two tables side by side in a Vue component?

I am working on a vue application with a photo collection feature. My goal is to display the photos in two tables per row, iterating through the entire collection. Here's an example of what I'm aiming for: <row> &l ...

javascriptvue.js

The element's height of 100% falls short of reaching the bottom of its containing element

I have searched through numerous questions, but I am unable to find a solution. Could someone kindly check this link and help me understand why the sidebar is not reaching the bottom of the content div: Using Javascript is not an option for me in this cas ...

htmlcss

JS - Reducing in size increases request size

I'm facing an issue with compressing my request - instead of reducing the size, it seems to be increasing it: const requestData = LZString.compress(JSON.stringify({ data: bigBase64StringHere })); await axios.post("api-endpoint", requestData, ...

javascriptgoogle-chromeaxiosrequestcompression

Issues with jQuery chaining and toggle not executing as expected

When running this code snippet, var waitRow = $(this).parent().parent().next().get(0); $(waitRow).children('td:nth-child(2)').html('some text').toggle(); the toggle function seems to be ineffective. However, by modifying the code as ...

jquerytogglechaining

Looking to streamline a JavaScript function, while also incorporating jQuery techniques

I've got this lengthy function for uploading photos using hidden iFrames, and while it does the job well, it's quite messy. I'm looking to simplify it into a cleaner function with fewer lines of code for easier maintenance. function simplif ...

javascriptjqueryfunction

I'm noticing that the dropdown content for all my buttons is identical. What could be causing this

I have encountered an issue with the two buttons placed inside my header. Whenever I click on either button, the content displayed remains the same. https://i.sstatic.net/fk4V8.png https://i.sstatic.net/TCL7H.png It seems that when I click on one button, ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible for AWS Lambda to store global variables?

I've devised a basic increment counter shown below. global.counter = 0; exports.handler = (event, context, callback) => { // TODO implement callback(null, ++global.counter); }; Every time I test this function, the value increments as anti ...

javascriptnode.jsaws-lambda

Adjusting and resetting the slider sizes

Are you an end developer facing issues with sliders in tabs? Your sliders appear to be working, but when switching to the second slider they disappear. The width and height of the slider seem to get lost. Resizing the site using responsive tools in Firefox ...

javascriptjqueryhtmlcss

Using JavaScript to manipulate an HTML canvas

I currently have an index.hTML file that is set up to display a canvas using the following code: <body> <canvas> </canvas> <script src="./JS/index.js" type="module"></script> </body> Within my JavaScript fi ...

javascripthtmlcanvashtml5-canvas

Managing the display of my website's screenshots within the list of recently visited sites on the browser's new tab page

Internet browsers like Firefox and Chrome have the ability to take screenshots of visited websites and display them as "recently used websites" on a new tab. However, if your website contains confidential information, you may be wondering how to prevent b ...

htmlfirefoxscreenshotthumbnailsbrowser-cache

Adding a sphere object to the periodic table in Three.js css3d

After recently diving into the world of Three.js, I've been playing around with the css3d - periodic table demo. As I tinker with the demo, I find myself wanting to add an additional sphere object to the center of the sphere periodic table. However, I ...

javascriptthree.js

Using jQueryUi Tabs for Organizing Div Tables

Recently, I implemented a jQuery tab on my website using the following code snippet: <div id="tabs"> <ul> <li><a href="#tabs-1">Basic Info</a></li> </ul> <div id="tabs-1"> ...

cssjquery-ui

Spotlight the content of the file obtained from GitHub

I'm having trouble with syntax highlighting for code fetched from GitHub. fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1") .then(response => response.text()) .then(data => document.getElem ...

javascripthtmlgithubsyntax-highlightinghighlight.js

Does anyone else have a peculiar problem with css width?

Either I have been designing web pages for an extensive period of time without taking a break or something truly bizarre occurred. <div style="background-color:#0F0; margin:5px; height:5px;"></div> This will generate a lengthy bar with a 5-pi ...

csshtmlwidth

Show a flash message and error notification following an AJAX call in Laravel

When making an ajax request successfully, I need to display a flash message in my view. For instance, after editing something, I want the user to be redirected to the homepage with a message like "$flash = Your changes have been saved". It's simple to ...

phpjqueryajaxlaravelflash-message

The process of submitting a form and inserting a record into an SQLite 3 database using Django and jQuery through AJAX

My form requires user input to save records into the sqlite 3 database. The issue arose when I added an image upload field to the form – previously, data saved correctly. However, now the system prompts that I include 'blank' and 'null&ap ...

jqueryajaxdjangosqlite

Unexpected strings added to files using jQuery Upload File Plugin, caused by WebKitFormBoundary

I'm currently utilizing a plug-in found at My purpose for using this plug-in is to send files to a WCF Rest Service and save them onto the hard drive. The upload process seems to work fine, however, there is an issue with images, executables, etc. a ...

jquerywcf-restjquery-upload-file-plugin