CODEWITHSUNDEEP
htmlcss
InvisiblePanda
InvisiblePanda

Reputation: 1609

Disregard a button's height when centering stuff vertically inside a td

I have a peculiar situation that I need some input on. I think my way of trying to accomplish my goal is misguided.

I have a table with 3 columns. In one row, the left and right td are filled with a select each, while in the middle column there are supposed to be three buttons arranged vertically:

HTML:

<table>
    <tr>
        <td class="content">
            <select multiple />
        </td>
        <td class="middle">
            <input type="button" value="1" />
            <br />
            <input type="button" value="2" />
            <br />
            <input type="button" value="S" class="special-button" />
        </td>
        <td class="content">
            <select multiple />
        </td>
    </tr>
</table>

CSS:

table {
    width: 100%;
    height: 100%;
}

select {
    width: calc(100% - 10px);
    height: 300px;
}

.content {
    width: 45%;
}

.middle {
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
}

.special-button {
    margin-top: 50px;
}

Now the buttons "1" and "2" should be vertically centered inside their parent td, while "S" should just be treated as if it had a height of 0. I.e., "S" should be somewhere near the bottom, while "1" and "2" should be aligned as if there were no "S" at all.

Is there an elegant way to achieve this? Like a CSS attribute to not include elements when creating the layout and insert them after?

Here is a JSFiddle with the layout that is not working correctly yet.

Upvotes: 0

Views: 42

Answers (1)

cameronjonesweb
cameronjonesweb

Reputation: 2506

The top and left values may need tweaking but this is what you want

.middle {
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
    position: relative;
}
input[value="S"]{
    position:absolute;
    top: 50%;
    left: 25%;
}

By positioning it absolute you take it out of the document flow and as such absolute elements are not affected by non-absolute elements and vice versa

Upvotes: 1

Related Questions