CODEWITHSUNDEEP
htmlcssvertical-alignment
user3623628
user3623628

Reputation:

"vertical-align:middle;" is not working inside td

I don't understand. This is a very simple document and I can't see any reason it shouldn't work.

CSS:

.button {
    background-color: transparent;
    border-radius: 50%;
    border: 5px solid #ff0099;
    display: table-cell;
    vertical-align: middle;
    height: 175px;
    width: 175px;
    text-decoration:none;
    text-align: center;
    word-wrap: break-word;
}
.button:hover {
    text-decoration: underline;
}
.button p {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
}
table {
    border-spacing: 20px 10px;
    border-collapse: separate;
}
td {
    vertical-align:middle;
}

HTML:

<table>
    <tr>
        <td>
<a href="#" class="button" target="_blank"><p>Insert text here, enough to push it over the edge</p></a>

        </td>
        <td>
<a href="#" class="button" target="_blank"><p>Insert text here, enough to push it over the edge</p></a>

        </td>
    </tr>
</table>

As far as I know, vertical-align was meant for use in td's, so I'm not sure why it isn't working.

Upvotes: 3

Views: 16588

Answers (4)

User1337
User1337

Reputation: 91

Because none of these solutions worked for me, I found the following solution on StackOverflow. As far as I can tell this also works flawlessly with Bootstrap 4.

td {
    display: flex;
    align-items: center;
}

Upvotes: 0

Ashish Balchandani
Ashish Balchandani

Reputation: 1266

Add below code to button css . Refer http://jsbin.com/kixewufe/2/ to view http://jsbin.com/kixewufe/2/edit?html,css,output to view complete code.

vertical-align:middle;
display:inherit;

Upvotes: 1

ctwheels
ctwheels

Reputation: 22817

Try using this code instead. It lays the button class over the text (which is vertical-align:middle;) and uses absolute positioning to position the button class on the table cell.

I apologize, I cannot add a jsfiddle at this time because they are experiencing some issues, however, if you copy - paste the code below you will see you get (what I believe is) your desired result.

HTML

<table>
    <tr>
        <td> <a href="#" class="button" target="_blank"></a>
            <p>Insert text here, enough to push it over the edge</p>
        </td>
        <td> <a href="#" class="button" target="_blank"></a>
            <p>Insert text here, enough to push it over the edge</p>
        </td>
    </tr>
</table>

CSS

.button {
    background-color: transparent;
    border-radius: 50%;
    border: 5px solid #ff0099;
    height: 175px;
    width: 175px;
    position:absolute;
    top:0px;
    left:0px;
}
td p {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    text-align:center;
    text-decoration:none;
    width:170px;
    margin-left:6px;
}
table {
    border-spacing: 20px 10px;
    border-collapse: separate;
}
td {
    position:relative;
    width:180px;
    height:180px;
    vertical-align:middle;
}

Upvotes: 0

haim770
haim770

Reputation: 49095

The <td> content is indeed vertically-aligned. The problem is that the content is the <a> tag that is consuming all the available height and its own content (which is the <p> paragraph) is not vertically aligned.

Try to align the <a> tag as well:

.button {
      display: table-cell;
      vertical-align: middle;
}

Upvotes: 1

Related Questions