Question

我是CSS的新手，我正在尝试垂直对齐：在div中间放置一些文本。以前曾经问过这个问题，但是我无法让任何解决方案适合我，所以我一定会错过一些明显的解决方案。

我试过了：

将文字放在<p>标记和CSS中，将vertical-align: middle;添加到<p>标记。

将文字放在<p>标记和CSS中，将vertical-align: middle;添加到父div。

将文字放在<div class="flex-container">和CSS添加

中

.flex-container {
display: flex;
justify-content: center;
align-items: center;
}

在此处：https://jsfiddle.net/dt3kvmdm/

父div在px中没有固定高度。相反，它是一个百分比。对类似问题的一个解决方案表明这可能是一个问题，但我不清楚。能够将其保持为百分比对我有帮助。

我会很高兴听到任何建议！

非常感谢！

尼克。

Answer 1

您需要在父元素上使用display: flex或在子元素Fiddle上设置height: 100%

.ProjectTitle {
  background-color: green;
  position: absolute;
  width: 100%;
  height: 20%;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-container {
  font-family: "Taviraj", serif;
  color: #000;
  letter-spacing: 0.11em;
}

<div class="ProjectTitle">
  <div class="flex-container">
    Project Title
  </div>
</div>

Answer 2

我不确定我是否完全理解你想要的东西，但看看这是否有帮助：

HTML：

var comboBoxDiv = domConstruct.create("div");

var myComboBox = new ComboBox({                           
    name: "state"
}, comboBoxDiv);

CSS：

<div class="ProjectTitle">
    <div class="flex-container">
        <p>Project Title</p>
    </div>
</div>

小提琴：https://jsfiddle.net/dt3kvmdm/1/

使用CSS垂直对齐容器内的文本

2 个答案: