CSS笔记 - 文字居中变大

在开发一款wordpress主题时有个需求,就是让两个块中的一个块里的字变大,为了美观,字要居中线对齐

在开发一款wordpress主题时有个需求,就是让两个块中的一个块里的字变大,为了美观,字要居中线对齐,

如下图:

CSS笔记 - 文字居中变大
CSS笔记 - 文字居中变大 - 我需要“Muze”变大

我写了个例子,如下图:

CSS笔记 - 文字居中变大

例子的代码:

<!DOCTYPE html>
<html lang="zh-CN" >
	<head>
		<title>文章居中变大 - flex</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>

<div class="box">
    <div class="box-one">Npcink</div>
    <div class="box-two">我是文字二</div>
</div>
<style>
    .box {
        overflow: hidden;
        padding: 20px;
        width: 500px;
        margin: 0 auto;
        border: 2px solid;
    }
    .box-one {
        float: left;
        border: 1px solid blue;
    }
    .box-two {
        float: right;
        border: 1px solid red;
    }
    /*我们先让Npcink变大*/
    .box-one {
        font-size: 50px;
    }
    /*居中的核心*/
    .box {
        display: flex;
        align-items: center;
    }
    .box-one {
        flex: 1;
    }
</style>


</body>
</html>

其中的核心代码是:

/*居中的核心*/
    .box {
        display: flex;
        align-items: center;
    }
    .box-one {
        flex: 1;
    }

这里用到了flex布局

国外主题

InHype - 博客和杂志WordPress主题

2020-8-22 8:41:07

Typecho

NewRealm - 经典双栏Typecho主题

2017-12-25 13:24:00

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索