css布局小技巧

CSS居中布局技巧

原创于 2017-10-28 15:02:17 发布 · 282 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局

css布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS实现单行及多行文字的居中显示。对于单行文字，可以通过设置text-align为center来实现水平居中；对于多行文字，则需要通过父级元素设置text-align为center，并使子元素display为inline-block且vertical-align为middle来实现垂直与水平的双重居中。

多行文字居中问题

1，普通的单行文字居中

<style>
    text-align:center;
    line-height:"height";
<style>

2，多行文字居中

.parent{
    text-align:center;
    line-height:'height';
}
.children{
    display:inline-block;
    line-height:'font-size';
    vertical-align:middle;
}