I have a webpage with four arrows positioned at the top left corner of the screen - pointing in different directions. I would like to align them in the center of the page so that they fit seamlessly into the layout without any scrolling required. Can anyone provide suggestions on how to achieve this?
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
<style>
#item_1 {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
#item_2 {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #555;
margin-top: 50px;
}
#item_3 {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #555;
border-bottom: 25px solid transparent;
margin-top: 50px;
float:left;
}
#item_4 {
width: 0;
height: 0;
align : right;
border-top: 25px solid transparent;
border-left: 50px solid #555;
border-bottom: 25px solid transparent;
float:left;
margin-top: 50px;
}
</style>
</head>
<body>
<div style="float:left; width: 100%">
<div id="item_3"></div>
<div style="float:left">
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="item_4"></div>
</div>
<input type="submit" value="Logout" style="
background: black;
color: #fff;
border: 0px;
padding: 5px;
margin-top: 40px;
">
</body>
</html>