美文网首页
web布局实现方式汇总

web布局实现方式汇总

作者: 暴风鱼 | 来源:发表于2017-05-26 11:28 被阅读31次

这里将总结我平时开发web时用到的布局方法,以及示例。
大部分在stackoverflow都有很好的回答,下面直接给出链接。

Tip: 每一种布局的实现方法很多,请自行权衡 :)

div中文本元素的垂直居中

我喜欢这个:

.container {        
    display: flex;
    align-items: center;
}

方法很多,直接看stackoverflow上的回答:
Is it possible to vertically align text within a div?

div中图片的垂直居中

我还是喜欢这个:

.container {        
    display: flex;
    align-items: center;
}

参考:Vertical alignment of elements in a div

flex布局:要求一个固定宽度,另一个自适应

参考这个:
Flexbox - two fixed width columns, one flexible

相关文章

网友评论

      本文标题:web布局实现方式汇总

      本文链接:https://www.haomeiwen.com/subject/tcxqxxtx.html