CSS笔记居中对齐、vh/vw、button添加图标方式

最新推荐文章于 2025-05-25 18:34:15 发布

原创最新推荐文章于 2025-05-25 18:34:15 发布 · 853 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #src/img #水平/垂直对齐 #vh/vw

Angular 专栏收录该内容

25 篇文章

订阅专栏

这篇博客详细介绍了CSS布局中的居中对齐方法，包括水平和垂直居中，使用了flex布局。同时探讨了vh和vw单位的应用，解释了它们与百分比的区别。还提到了在Angular中如何为button添加图标，并讨论了div窗口的动态居中和竖向排列的方法，涉及到calc()函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平居中

采用flex布局

.div
{
    display: flex;
    justify-content: center
}

在ng-zorro中

<div nz-row [nzType]="'flex'" [nzJustify]="'center'" >

垂直居中

采用flex布局

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

在ng-zorro中

<div nz-row [nzType]="'flex'" [nzAlign]="'middle'">

纵向单行对齐方式
(1)align-item:flex-start纵向从上到下

(2)align-item:flex-end纵向从下到上

(3)align-item:center纵向居中对齐

(4)align-item:baseline以基线对齐

(5)align-item:strech这是默认方式
主轴方向的对齐方式

(1)justify-content:flex-start则主轴为左对齐

(2)justify-content:flex-end 则主轴为右对齐

(3)justify-content:center 则主轴为居中

(4)justify-content:space-between则每个子项目之间等距离，前提是有剩余空间

(5)justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

vh和vw

1.vh

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

2.vw

vw就是当前屏幕宽度的1%

补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

button 添加图标

在angular中需将图标放到assets文件夹下，才能设置成功。放到其他文件暂时不知道怎么设置

<div nz-col class="barbutton" nzSpan="4">
               <button nz-button nzType="default" style="border:0px"><img
                          src="../../../../assets/images/icon_export.png" /></button>
               <br />
               <p>Export</p>
  </div>

div窗口居中

动态设置宽高

        let height = window.innerHeight > window.innerWidth ? window.innerWidth : window.innerHeight;
        (<IFrameHostComponent>this.filmingHost.instance).height = height;
        //0.92为Filming medviewcontrol占总高的比列 30为左右margin 218为窗口布局宽度
        let width = Math.floor((0.92) * 0.8 * height + 218 + 30);
        (<IFrameHostComponent>this.filmingHost.instance).width = width;//保证Filming medviewcontrol的宽高比列为0.8
        //居中设置
        this.filmingDiv.nativeElement.style.top = '50%';
        this.filmingDiv.nativeElement.style.left = '50%';
        this.filmingDiv.nativeElement.style.marginTop = -Math.floor(height / 2) + 'px';
        this.filmingDiv.nativeElement.style.marginLeft = -Math.floor(width / 2) + 'px';

calc

设置高度宽度得大小

因为css的运算符"+ - * /"左右两边均要留空格，不然无效，如"widht: calc(12%+5em)"这种没有空格就无效

div 竖向排列

         <div style="display:flex;flex-flow:column;height:30px;">
            <div style="display:flex;height:15px;align-items:center;justify-content:flex-end">
              <span>div1</span>
            </div>
            <div style="display:flex;height:15px;align-items:center;justify-content:flex-end">
              <span>div2</span>
            </div>
          </div>

在这里插入图片描述