Question

我有一系列CSS风格的盒子。每个框都有一个标题，后跟段落标记中的数字。一些标题是2行，在这种情况下，数字显示在我想要的位置：居中于框的底部。如果标题只有1行，那么数字会比我想要的要高。如何才能将数字放在空白区域的中心？这是怎么回事？

<div class="sm red left-margin"><h2>Website<br/>Visitors</h2><p>120,363</p>    </div>

Answer 1

尝试添加vertical-align:middle;和line-height

Answer 2

p   {

    font-weight: bold;
    font-size: 2em;
    text-align: center;
    position:absolute;
    bottom: 5%;
    width: 100%;
}

Answer 3

这是一个hacky解决方案，但您可以通过在标题中添加两个换行符来解决您的问题。这基本上就是问题 - 当你的标题只占用一行时，它不会将数字向下推到div的白色部分。

Answer 4

我能够通过使用flexbox来实现。我必须对CSS进行一些更改以覆盖来自langsdale-dashboard.css文件的颜色。

我继续前进，使你的CSS也更有效率。我只在CSS上进行了更改，以使工作正常。这是我做的：

将颜色应用于h2而不是父容器。
从父容器中移除高度，并将高度设置为h2和p。
将display:flex; justify-content:center;和align-items:center应用于h2和p。

我包含以下代码。您也可以在JSFiddle上查看它：https://jsfiddle.net/m0nk3y/snp3gvke/11/

如果您有任何问题，请与我们联系。

.lg,.med,.sm {
	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
	position: relative;
}
.lg {
	width: 700px;
}
.med {
	width: 500px;
	display: inline-block;
}
.sm {
	width: 175px;
	display: inline-block 
}
.sm, .med, .lg {
	vertical-align: top;
}
.left-margin {
	margin-left: 15px;
}
.row {
	margin-bottom: 10px;
}
h2,
p {
  display: flex;
  margin: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
}
h2 {
  height: 75px;
  border-radius: 12px 12px 0 0;
}
p   {
  height: 100px;
	font-weight: bold;
	font-size: 2em;
}
.blue, .red, .green, .orange {
  background: transparent;
}
.blue {
	border-color: #41B6E6;
}
.blue h2 {
	background: #41B6E6;
}
.red {
	border-color: #ce2029;
}
.red h2 {
	background: #ce2029;
}
.green  {
	border-color: #C4D600;
}
.green h2  {
	background: #C4D600;
}
.orange {
	border-color: #E35205;
}
.orange h2 {
	background: #E35205;
}

<link href="https://langsdale.ubalt.edu/zz-test/langsdale-dashboard.css" rel="stylesheet"/>

<body>
    <div class="row">
        <div class="lg blue">
            <h2>Walk-in Visitors</h2>
            <p>109,328</p>
        </div>
    </div>
    <div class="row">
        <div class="med red">
            <h2>Special Collections<br/>Flickr Views</h2>
            <p>75,985</p>
        </div>
        <div class="sm green left-margin">
            <h2>Questions<br/>Answered</h2>
            <p>19,570</p>
        </div>
    </div>
    <div class="row">
        <div class="sm blue">
            <h2>Materials<br/>Circulated</h2>
            <p>375,985</p>
        </div>
        <div class="med orange left-margin">
            <h2>Instruction Session<br/>Attendees</h2>
            <p>2,045</p>
        </div>
    </div>
    <div class="row">
        <div class="med green">
            <h2>Database Searches</h2>
            <p>330,479</p>
        </div>
        <div class="sm red left-margin">
            <h2>Website<br/>Visitors</h2>
            <p>120,363</p>
        </div>
    </div>
    <div class="row">
        <div class="lg orange">
            <h2>Titles Borrowed via ILL</h2>
            <p>5,773</p>
        </div>
    </div>
</body>

div中的文字被撞倒 - 如何居中？

4 个答案: