The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Margin-top:auto and margin-bottom: auto not working
Anjali Agarwal
post Jun 3 2020, 04:20 PM
Post #1





Group: Members
Posts: 3
Joined: 2-June 20
Member No.: 27,371



Why do margin-top:auto and margin-bottom: auto not work ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jun 3 2020, 05:28 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



In what way? You need to provide better details or post some code.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Anjali Agarwal
post Jun 3 2020, 06:22 PM
Post #3





Group: Members
Posts: 3
Joined: 2-June 20
Member No.: 27,371



Following is the HTML code:
CODE
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="selectors.css">
</head>
<body>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>


And following is the corresponding CSS code:
CODE
table{
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
}

td{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}


So, the table is being horizontally aligned to the centre. However, it is not vertically aligned to the centre of the screen.
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 3 2020, 09:07 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Auto margins only work for horizontal centering, not vertical.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 11:22 AM