小编m_c*_*cht的帖子

文本对齐:居中和对齐项目:中心不能水平工作

以前从未有过这种情况.我尝试text-align: center了各种各样的地方,但他们都没有工作.它们垂直工作,但它们不能水平工作.我试图让每个盒子在水平和垂直方向都能正常工作.

这是我的代码:

.boxes {
  height:100%;
}
.box {
  width: 33%;
  height: 20%;
  display: -webkit-flex;
}
.box p {
  display: flex;
  align-items: center;
}
.box1 {
  background: magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="tabletest.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="boxes">
      <div …
Run Code Online (Sandbox Code Playgroud)

html css flexbox responsive-design

14
推荐指数
2
解决办法
2万
查看次数

标签 统计

css ×1

flexbox ×1

html ×1

responsive-design ×1