Is there a way to align the button in the middle of the dropdown menu?

I am struggling to center align a button inside a dropdown menu that I have created for signing in.

https://i.sstatic.net/2O3uk.jpg

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown text-center">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li>
        <button class="btn btn-info"><div class="dropdown-item"  style="width:100px; text-align:center; left:50% margin-left:50px;">Sign In</div></button>
        <h6 class="dropdown-header">New User? <a href="#">Sign up</a></h6>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#"><div class="dropdown-item">ABCDE</div></a>
        <a href="#"><div class="dropdown-item">UVWXYZ</div></a>
      </li>
    </ul>
  </li>
</ul>
htmlcssbootstrap-4

Answer №1

To center the content, you can simply add text-align:center; to the wrapper element li. Remember that text align should be applied to the parent of the element you want to center. Additionally, you should remove the margin and left position from the div.

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown text-center">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li style="text-align:center;">
                <button class="btn btn-info"><div class="dropdown-item"  style="width:100px;">Sign In</div></button>
                <h6 class="dropdown-header">New User? <a href="#">Sign up</a></h6>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#"><div class="dropdown-item">ABCDE</div></a>
                <a href="#"><div class="dropdown-item">UVWXYZ</div></a>
            </li>
        </ul>
    </li>
</ul>

If you only want the button centered, you can make it a block element and use margin:0 auto;. Apply this style to the button itself instead of its child div, following the advice shared by Gerard.

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown text-center">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <button class="btn btn-info" style="width:100px;display:block;margin:0 auto;"><div class="dropdown-item">Sign In</div></button>
                <h6 class="dropdown-header">New User? <a href="#">Sign up</a></h6>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#"><div class="dropdown-item">ABCDE</div></a>
                <a href="#"><div class="dropdown-item">UVWXYZ</div></a>
            </li>
        </ul>
    </li>
</ul>

Answer №2

Your focus was on the content of the button rather than the button itself. This revised code snippet should help clarify.

<div class="dropdown-item" style="width:100px; text-align:center; left:50% margin-left:50px;">
<button class="btn btn-info">Sign In</button>
</div>

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

Minimum number of cards in each column

I'm currently utilizing media queries to make sure that my card-columns are shown in a responsive manner. However, I have noticed that there is a minimum requirement of 2 cards in each column before it moves on to the next one (from left to right). T ...

cssbootstrap-4

What is the best way to retrieve multiple model values from a single selection in AngularJS?

I recently started learning AngularJS and have a basic question to ask. I have a select box that allows users to choose a country from a list of countries. Currently, when a country is selected, only the country code is stored in the model. However, I woul ...

javascriptjqueryhtmlangularjs

What's the best way to conceal scrollbars in Nuxt2 whilst preserving one for the description?

The Issue My goal is to remove scrollbars from all pages (which I achieved successfully), but keep one visible for a specific section of description. What I Attempted I tried adding the class .scroller and only displaying it for the <div> containi ...

cssvue.jsnuxt.jsscrollbar

Trouble with div height 100% not syncing with bootstrap and wordpress

This particular code (by the way, taken from another stackoverflow post) is functioning properly as the red div#wrapper extends from top to bottom... <html> <head> <style media="screen"> #wrapper { height:100%; width:300px; b ...

htmlcsswordpresstwitter-bootstrap

The filter search feature fails to return any results when data is inputted into the tables

I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...

htmlcss

IIFE and the Twitter share button are a powerful duo

As I experiment with this quick creation of mine, two questions have arisen. The first one is, how can I encapsulate all the JS code within an IIFE without breaking it? The second question is about finishing the twitter button to enable sharing the act ...

javascripthtmlapitwitteriife

Retrieve JSON data generated within a JavaScript-powered webpage

My issue involves two HTML pages: 1) The first HTML Page (page1.html): <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script type="text/ ...

javascriptjqueryhtmlajaxjson

Is there a solution to address the issue of Mobile Safari displaying CSS in a unique

My layout consists of two columns, with data on the left and navigation on the right. While it renders correctly on Safari desktop, Safari for iPhone displays the right column at the bottom of the page underneath the data. Here is the basic code template: ...

htmlcssmobilesafari

I am trying to replace the buttons with a dropdown menu for changing graphs, but unfortunately my function does not seem to work with the <select> element. It works perfectly fine with buttons though

I am currently working on my html and ts code, aiming to implement a dropdown feature for switching between different graphs via the chartType function. The issue I am facing is that an error keeps popping up stating that chartType is not recognized as a ...

htmlangulartypescriptchart.js

Adjust the height of the drawer in material-ui

In my current project using react and material-ui, I am facing a simple issue that has me stumped. I am trying to create a drawer with a specific height so that it does not overlap the app bar when opened. Unfortunately, there is no built-in parameter in ...

cssreactjsmaterial-ui

Iterating through elements to set the width of a container

I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code: <script> $('.progress-fill span').each(function(){ var percent = $(this).html(); if(per ...

javascriptjqueryhtmlcss

I'm confused about what I did wrong with Node.js. The server.js is up and running, but I'm unable to view the

I have made some progress so far and I am currently running this code on Putty. var http = require('http'); var fs = require('fs'); const PORT = 8080; http.createServer(function(request, response) { var url = request.url; switc ...

javascripthtmlnode.js

Is there a way to delete a table's row using JavaScript?

Hey there, total newbie to coding here. I'm working on a simple to do list project. The adding function is working great, and here's the code for it: let salvar = document.getElementById("salvar") let remove = document.getElementById("remove ...

javascripthtml

ASP.NET Core 2.1 struggling to implement Shared Layout view across all views

I am facing an issue where the layout view is not consistent across all pages on my website. While the home page and main pages share the same layout, other pages like the login page lack styling and images. Additionally, features like CRUD operations also ...

cssasp.netasp.net-corebootstrap-4

Is there a way to customize setInterval for a specific element?

For some time now, I've been working on creating a typing animation that triggers when links come into view during scrolling. However, I've encountered a problem with jQuery not selecting the correct element or the setInterval objects causing all ...

javascriptjqueryhtmlsetinterval

Are you looking for a stunning vertical gallery with responsive design in Photospace Gallerific? Let's enhance it

Is there a way to make my gallery from http://wordpress.org/extend/plugins/photospace-responsive/ responsive? I want it to change from a vertical layout to horizontal when the browser is scaled down for mobile viewing. Can you advise on how to ensure that ...

csspluginsresponsive-designgalleriffic

CSS error: Menu hover glitch concealed

I'm currently facing an issue with the navigation on my website. Whenever I place a logo image above the menu, the hover effect of the menu stops working correctly. To clarify: the background doesn't change on hover, but the border does. Here are ...

htmlwordpresscss

What could be causing the malfunction of my navbar and carousel functionality?

I am currently facing some challenges with the carousel in my HTML code. I am unable to get it to display images properly. Additionally, there is an issue with the background color of my navigation bar - it doesn't stay at 100% width. Also, when using ...

htmlcsstwitter-bootstrapcarousel

Tips for creating a smooth transition effect using CSS/JavaScript pop-ups?

Looking for some assistance in creating a CSS pop-up with a touch of JavaScript magic. I've managed to trigger the pop-up box by clicking a link, and while it's visible, the background fades to grey. But I'm struggling to make the pop-up fad ...

javascriptcsspopuptransitionwebkit-transform

What is the best way to adjust a component to display varying content based on the scenario?

I am looking for a way to reuse a component on my website that displays messages. The challenge is that in one section, the content consists of only a title and paragraph, while in another section, there are multiple titles and content pieces. I have imple ...

htmlcssvue.js