Why are these buttons getting misaligned

HTML & CSS
1

I have 3 buttons. I would like them to display in a horizontal line, centered in the parent div. I cannot for the life of me get it to work. Every time I put any margin or anything on them, the first one goes to the upper right of the div, and the other two go to the left side and what seems to be the next row down. I have no idea why though. Can anyone explain what is going and help me out?

Html:

<div id="homepagemain">
    <div id="banner">
        <a class="button">My Paystub</a>
        <a class="button" type="button" href="https://portal.paychekplus.com/" target="_blank">Pay Card</a>
        <a class="button" asp-controller="Home" asp-action="NewsLetter">Monthly Newsletter</a>
    </div>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                @Html.Partial("_CorporateEvents", Model.CorporateEvents)
            </div>
            <div class="item">
                <a href="https://www.asbaces.com/newaces/(S(ujn24e2mcpp1kzkc4ivg0kzh))/storefront.aspx">
                    @Html.Partial("_CorporateStore", Model.CorporateStore)
                </a>
            </div>
            <div class="item">
                <a asp-controller="Home" asp-action="NewsLetter">
                    @Html.Partial("_CorporateNews", Model.CorporateNews)
                </a>
            </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<div id="eventsdiv" class="eventsgradient">
    <h3 id="eventstitle">Upcoming Events</h3>
    <div id="eventstext">
        <ul>
            @foreach (var item in Model.UpcomingEvents)
            {
                <li>
                    @item.Title   -   @item.Date   -   @item.EventInfo
                </li>
            }
        </ul>
    </div>
</div>

css:

#banner {
    background-image: url("/Images/Banner.png");
}

.button {
    text-align: center;
    display: inline-block;
    background: linear-gradient(to bottom, #95bfe6, aliceblue);
    color: #002d62;
    border-radius: 50%;
    font-size: larger;
    border-style: solid;
    border-color: #002d62;
    border-width: 1px;
    height: 70px;
    width: 165px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    line-height: 55px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
    .button:hover {
        transform: scale(1.05);
    }

#myCarousel {
    margin-top: 1%;
    margin-bottom: 1%;
}
2

I can’t replicate that behaviour with that code. :confused:
If I can add one thing, maybe you wanted text-align: center; applied to the banner, not the buttons.

3

The text-align center is to center the text inside the buttons. I did try to put text-align center on the banner, but it did not have any effect. I’m so confused with what this is doing. If I move it over to my laptop monitor, they all sit on the very left side of the banner div. If I put it on my regular monitor, they all shift all the way to the right side of the banner div. I don’t understand why I’m getting this behavior.

4

Being inline-blocks the buttons will wrap to a new line if there is not sufficient width on the banner.
And by default they align to the left.
I guess the question is: what do you want it to look like on wide and narrow screens?

That’s odd, for me it centres the buttons in the banner and the text within the buttons (inherited from the banner).

5

I guess ideally what I would like is them to be in a horizontal row on a computer, but on phones or smaller tablets, put them in a column.

6

A simple media query will do that. You just need to set the query at a safe width value to make the switch from display: block to display:inline-block taking into account any margins you want to add to the buttons.

7

Right, but that won’t fix what they are doing now. With no margin’s or any placement attributes on it this is what it looks like right now. I want them to be centered, with some space above and below, and space between them. But every time I put any type of margin on there, the My Paystub button goes all the way to the right and the other two go to the next row on the left.

1677Ă—946 384 KB

8

That is quite different to what I’m seeing, here it is in codepen:-

All I changed was to add a margin to the buttons and moved the alignment to the banner.
Obviously there is more (different?) code in your complete page, so that likely accounts for the difference in layout.

9

And I believe I’m understanding this correctly. I have the MyPaystub button selected and it is showing no margins applied. It also does not show any margins applied for the other button, or the div surrounding it, or anything else surrounding t.

1903Ă—359 40.9 KB

10

This is what I get when I add margin:1em;

1674Ă—946 413 KB

11

I think it has something to do with my navbar… I commented out the entire thing, and it works fine. For some reason, something in my navbar is overflowing and taking up space on that left side I think.

12

Evidently You are looking at different code to that you posted (I).
All I can see from you “Inspect” is a rule for box-sizing on the buttons, yet that does not exist in the code you posted.

13

What is the box-sizing thing? I don’t even know what that is. I never put it in any of my code?

14

Try temporarily adding this CSS

#banner a { 
  font-size: .5em; 
}

or simply zooming out text only.
Does that stop the shifting to a new line?

My guess is that it looks OK for some but not for you is because your browsers default font size is larger

15

It’s on your screen-shot in post #9.

16

Did you see the part where I said it has something to do with the navbar? I’ve had endless problems with my navbar, so I’m not surprised that it’s causing me problems yet again.

1 Like
17

Yea I see it, I just don’t know what it is or what it does, or even where it came from since it’s not in my code in the IDE.

18

As for what it is and what it does, I think the MDN pages that come up in a search can do a better job of explaining than I could do.

https://www.google.com/search?q=mdn+box+sizing

As for where it comes from, browsers have their own default CSS rules. AFAIK, the default should be content-box, but maybe not.

It doesn’t seem likely, but it’s entirely possible that the 2 pixels added by the border are forcing the drop.

19

And from looking at your screenshot in post #10 I would almost bet that it is the sub-ul in your dropdown menu items. I’m assuming that’s what they are from the down arrows.

I’ll bet the sub-list are not absolute positioned, but just hidden with visibility:none; or something else that is still leaving them physically in place.

Try moving them off screen with margin-left:-999em; then margin-left:0; on hover

I can see that the “Monthly Newsletter” button comes back to center when it clears the obstruction.

And your dropdown list items are in the middle on your screenshot, so that explains it.

On your laptop the dropdowns are probably towards the right side.

20

This did not fix it.