时间戳

首页 > 解决方案 > 在css中将文本与div中的正方形内的底部对齐

html - 在css中将文本与div中的正方形内的底部对齐

问题描述

我有一个如下所示的屏幕截图，我可以在其中制作 square 和 text in fiddle。

在此处输入图像描述



我用来制作正方形的 CSS 代码是：

.squares 
{
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem;
background-color: rgb(238, 238, 238);
flex-wrap: wrap;
vertical-align: bottom;
}

.squares .square 
{
width: 200px;
text-align: center;
height: 200px;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
border-radius: 10px;
background-color: rgb(255, 255, 255);
}



问题陈述：

我想知道我需要在小提琴和上述代码中添加哪些 CSS 代码，以便文本出现在每个正方形的底部。

我试过了，display: inline-block; align-self: flex-end;但不知何故它不起作用。

标签： htmlcss

解决方案

align-items: flex-end仅适用于 flexbox 元素，并且inline-block元素是块级的。而不是display: block，您只是在寻找display: inline-flex孩子.squares .square（连同align-items:flex-end）。

text-align: center另外，请注意，如果您想将文本水平居中，而不是marign: 0 auto在p元素上。

这可以在下面看到：

.squares {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: rgb(238, 238, 238);
  flex-wrap: wrap;
}

.squares .square {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  display: inline-flex;
  align-items: flex-end;
}

.squares .square p {
  vertical-align: text-bottom;
  margin: 0 auto;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Testing</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="squares">
    <div class="square">
      <p>Franchise Hub Hierarchy</p>
    </div>
    <div class="square">
      <p>System wide user permissions</p>
    </div>
    <div class="square">
      <p>Custom Corporate Branding</p>
    </div>
    <div class="square">
      <p>Configurable Workflow</p>
    </div>
    <div class="square">
      <p>Orders, C.R.M. and P.O.S</p>
    </div>
  </div>

</body>

</html>

推荐阅读