!
也想出现在这里? 联系我们
全球五大数据中心,CYUN提供海外优质服务器,CN2优化线路,为您的业务推进提供强大助力

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

人已赞赏
css

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

2019-10-2 13:27:16

css

使用CSS3 动画实现12种风格的通知提示 - CSS笔记

2020-4-16 19:49:02

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