在开发一款wordpress主题时有个需求，就是让两个块中的一个块里的字变大，为了美观，字要居中线对齐
在开发一款wordpress主题时有个需求，就是让两个块中的一个块里的字变大，为了美观，字要居中线对齐，
如下图：
我写了个例子，如下图：
例子的代码：
<!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布局
