How can I center a
horizontally?

Question

How can I center a <ul> horizontally?

I have the underscored list but it seems to be aligning to the left and I want to center it.

<ul id="give-donation-level-button-wrap" class="give-donation-levels-wrap give-list-inline">
<li><button type="button" data-price-id="1" class=" give-donation-level-btn give-btn give-btn-level-1 give-default-level" value="25.00">$25</button></li>
<li><button type="button" data-price-id="2" class=" give-donation-level-btn give-btn give-btn-level-2 " value="50.00">$50</button></li>
<li><button type="button" data-price-id="3" class=" give-donation-level-btn give-btn give-btn-level-3 " value="75.00">$75</button></li>
</ul>

Also, how can I make selected amount button have a yellow border when clicked?

http://74.220.215.60/~xthrdmac/green/home-4-2/

Possible duplicate of [Center

into div](http://stackoverflow.com/questions/1708054/center-ul-li-into-div) — Rob, Oct 28 '16 at 23:41

score 1 · Answer 1 · answered Oct 31 '16 at 18:22

1

Try this:-

ul { text-align: center; }
li { display: inline-block; } /* Don't float them */

answered Oct 31 '16 at 18:22

Razia sultana

2,168
3
15
20

score 0 · Answer 2 · answered Oct 28 '16 at 23:42

Just align it by setting the horizontal margin to auto.

ul {
    display: block;
    margin: 0 auto;
}

If you want to center the list items inside the ul, use this:

ul {
    text-align: center;
}

ul > li {
    display: inline-block;
}

The site you are referring to needs the items so center, not the list.

score 0 · Answer 3 · answered Oct 28 '16 at 23:44

0

Make the following changes:

#give-donation-level-button-wrap > li {
  /* float: left; <-- remove*/
  display: inline-block; /* <-- add */ 
}

answered Oct 28 '16 at 23:44

AM Douglas

1,873
1
13
17

I tired it but it didn't make a difference – user1724434 Oct 28 '16 at 23:56
Did you add the above code to the stylesheet, or amend the original rule? If you aren't amending the original rule, and are adding a new rule to override the original, you'll need to add `float: none;` -- this is what I see when I make the change in my browser's dev tools: http://i.imgur.com/Obzkrt1.png – AM Douglas Oct 29 '16 at 00:01

score 0 · Answer 4 · answered Oct 29 '16 at 04:19

0

Just paste this in your css

 #give-donation-level-button-wrap > li {
    display: inline-block;
    float: none;
 }

answered Oct 29 '16 at 04:19

Alex Andrei Bastida Flores

2,339
1
9
6

score 0 · Answer 5 · answered Oct 29 '16 at 12:18

Put the ul element in divs and use the "text-align: center;" prop for the div. though the bullets will appear in a way you surely would not want so make use of the prop "style: none;" for the list. OR apply the styles

div{
           margin-left: 50%;   
}

score 0 · Answer 6 · edited Oct 31 '16 at 19:39

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style>
        div{
        width:100%;
        }

        ul{
        margin-right: auto;
        margin-left: auto;
        width: 12%;
        }

        ul li{
        float:left;
        list-style:none;
        }

        ul li button{
        outline:none;
        background-color:#eee;
        color:red;
        }

        .off{
        border:1px solid red;
        }
        .on{
        border:1px solid yellow;
        }
    </style>
    <script>
        $(document).ready(function(){
            var selector = 'ul li button';

            $(document).ready(function(){
                $(selector).on('click', function(){
                    $(selector).removeClass('on');
                    $(this).addClass('on');
                });
            });
        });
    </script>
</head>
<body>
     <div>
        <ul>
         <li><button class="off">$200</button></li>
         <li><button class="off">$400</button></li>
         <li><button class="off">$600</button></li>
        </ul>
     </div>
</body>
</html>

How can I center a horizontally?

6 Answers6

How can I center a
horizontally?