css

CSS笔记 - 文字居中变大

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

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

如下图:

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

我写了个例子,如下图:

CSS笔记 - 文字居中变大-Npcink

例子的代码:

<!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布局

2020-03-26
css

Oculux Mega Bundle - 响应式管理仪表板模板和用户界面套件

2019-10-2 13:27:16

随记

抽奖代码

2019-5-30 8:43:06

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,未经Npcink作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 1355471563 或 点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索