时间戳

首页 > 解决方案 > 需要在页面中心对齐样式表中的div元素

html - 需要在页面中心对齐样式表中的div元素

问题描述

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

请看下面的代码：

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

标签： htmlcss

解决方案

您可以尝试将所有 4 个箭头 div 放入/分组到一个 div 中并对其进行样式设置。我尝试了以下代码：

CSS

  .container
    {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    }

HTML

   <div class="container">
        <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>
   </div>

推荐阅读