试图中心页面上的HTML divs

我想中心在页面上的div标签（内容是无关紧要的）。我能够做到这一点，页面看起来很棒，但它在任何地方都会被任意边缘的黑客彻底篡改，以便正确对齐。有人能指点我一个简单的.css解决方案来拉一个结构看起来像附加图像的页面吗？试图中心页面上的HTML divs

来源

2017-04-14 nikotromus

Flex。绝对灵活。 –

Flex it baby;） – Mazz

css网格例如引导。 flex仍然不是通用的（移动Safari？） –

您可以使用纯CSS没有弯曲或网格布局。以下是使用Bootstrap的示例：

<div class="container"> 
    <div class="block row"></div> 
    <div class="clearfix row row2"> 
    <div class="col-sm-6 col"><div class="block"></div></div> 
    <div class="col-sm-6 col"><div class="block"></div></div> 
    </div> 
    <div class="block row"></div> 
    <div class="clearfix row row4"> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    <div class="col-sm-4 col"><div class="block"></div></div> 
    </div> 
</div> 

.block { 
    background: blue; 
    height: 30px; 
} 
.row { 
    margin-bottom: 20px; 
} 
.row .col:first-child { 
    padding-left: 0; 
} 
.row .col:last-child { 
    padding-right: 0; 
} 
.row4 .col { 
    padding: 0 30px; 
}

这是jsfiddle。

来源

2017-04-14 13:59:35 shaochuancs

现在，这是干净的.....谢谢.... – nikotromus

@ shaochuancs - 有没有办法做到这一点，而不必指定高度的一切？如果我可以将内容放入内容并自动调整大小，这将是完美的。 – nikotromus

是的，'.block'的高度可以由其内容动态决定。请检查：https://jsfiddle.net/cshao/j6xsrucm/7/请注意''.block'使用'height：100％'来使块水平对齐。 – shaochuancs

您可以使用百分比宽度，与float属性相关联，以做你想做的。

浮法：https://www.w3schools.com/css/css_float.asp

例如：

HTML：

<div class="header"></div> 
<div class="second-container"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
</div> 
<div class="third-container"> 
</div> 
<div class="fourth-container"> 
    <div class="left"> 
    </div> 
    <div class="middle"> 
    </div> 
    <div class="right"> 
    </div> 
</div>

CSS：

.header{ 
    width:90%; 
    height:50px; 
    margin:5%; 
    background-color:blue; 
    } 

    .second-container{ 
    height:80px; 
    width:90%; 
    margin:5%; 
    } 

    .second-container .left{ 
    height:100%; 
    width:40%; 
    margin-left:5%; 
    margin-right:5%; 
    float:left; 
    background-color:blue; 
    } 

    .second-container .right{ 
    height:100%; 
    width:40%; 
    margin-left:5%; 
    margin-right:5%; 
    float:left; 
    background-color:blue; 
    } 

    .third-container{ 
    height:50px; 
    width:90%; 
    background-color:blue; 
    margin:5%; 
    } 

    .fourth-container{ 
    height:70px; 
    width:90%; 
    margin:5%; 
    } 

    .fourth-container .left{ 
    background-color:blue; 
    height:100%; 
    width:29%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    } 

    .fourth-container .middle{ 
    background-color:blue; 
    height:100%; 
    width:30%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    } 

    .fourth-container .right{ 
    background-color:blue; 
    height:100%; 
    width:29%; 
    margin-right:2%; 
    margin-left:2%; 
    float:left; 
    }

当然，如果你想调整你想要的方式，你可以玩保证金的价值。如果你想让它看起来不错，只需要照顾100％的同一条线。

的jsfiddle这里：https://jsfiddle.net/zg1u2dnu/

来源

2017-04-14 14:01:34 Driblou

嗯...有很多方法可以得到这样的结果。如果你想用纯HTML/CSS做，Flexbox的可能是最方便的解决方案：

#wrapper { 
 
    width: 85%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#wrapper > div { 
 
    margin: 10px; 
 
} 
 

 
.blue { 
 
    background-color: #4F81BD; 
 
} 
 

 
#top, #middle-bottom { 
 
    height: 100px; 
 
} 
 

 
#middle-top, #bottom { 
 
    height: 180px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
#middle-top > div { 
 
    width: 45%; 
 
} 
 

 
#bottom > div { 
 
    width: 30%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Flexbox demo</title> 
 
</head> 
 
<body> 
 
    <div id="wrapper"> 
 
    <div id="top" class="blue"></div> 
 
    <div id="middle-top"> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
    </div> 
 
    <div id="middle-bottom" class="blue"></div> 
 
    <div id="bottom"> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
     <div class="blue"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

然而，像香草JS，这将不会按预期在所有网页浏览器...我建议您使用前端框架如Bootstrap,Foundation或Semantic UI以获得最佳效果。

来源

2017-04-14 14:19:40 Badacadabra

试图中心页面上的HTML divs

回答

相关问题