Question

I have two functions in my jQuery which manage two buttons and then display them. What I want is for the buttons to be displayed in the center, but align=center doesn’t work. Does anyone know how to do this in my jQuery code?

jQuery code below:

function insertQuestion(form) {   

    var $answer = $("<table class='answer'></table>");

    $('.allBtns:first-child').each(function() {
        var $this = $(this);
        var $allBtnsClass = '';

        $allBtnsClass = $("<input class='allBtns btnsAll' type='button' style='display: inline-block;' value='Select All Answers' onClick='selectAll(this);' />")
            .attr('name', $this.attr('name'))
            .attr('value', $this.val())
            .attr('class', $this.attr('class'));
        }

        $answer.append($allBtnsClass);
    });

    $('.allRemoveBtns:first-child').each(function() {
        var $this = $(this);
        var $removeBtnsClass = '';

        $removeBtnsClass = $("<input class='allRemoveBtns btnsRemove' type='button' style='display: inline-block;' value='Remove All Answers' onClick='removeAll(this);' />")
            .attr('name', $this.attr('name'))
            .attr('value', $this.val())
            .attr('class', $this.attr('class'));
        }

        $answer.append($removeBtnsClass);
    });

    $tr.append($answer);   
}

Answer 1

I don’t know if this is your only issue, but you are placing your buttons in a table; tables should not directly contain input elements. I don’t think you need a table anyway. If you make your container element a div (say, with the class answers), you can just have this style in your stylesheet:

.answers { text-align: center; }

Then, if you stop setting display: inline-block on your input buttons, they should display inline by default, and then the text-align: center of the container should take care of centering them.

Your JavaScript also contains too many }s. They are only needed when pairing with {s.

I hope that helps.