html - 需要将样式表中的div元素居中对齐

标签 html css

网页显示上、右、左、下四个箭头;在屏幕的左上角。我需要将它们对齐到页面的中心,使其适合页面布局而不会出现滚动。谁能建议我需要做什么?

请看下面的代码:

<!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>

最佳答案

关于html - 需要将样式表中的div元素居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58904511/

相关文章:

html - ionic 如何返回嵌套 View

javascript - 无法获取输出

javascript - 使用 vanilla javascript 在 Bootstrap 模式中显示输入信息并选择字段

html - 视频标签不适用于 Safari 上的 Rails

JavaFX8 : How to shut down anti-aliasing on text?

常见平板电脑尺寸的 CSS 媒体查询

html - Bootstrap 中 key 对值的左右对齐

CKEditor 内容的 JavaScript 打印

html - 图像标题翻转的语义标记?

html - 如何使用bootstrap强制div处于底部