Question

我有一个div，文本位于其中心。当我写第二个文本，然后在中心显示下一行时，它显示在同一行。

.selection_of_speakers_no_div {
	margin: 0 auto;
	display: flex;
	height: 115px;
	text-align: center;
  border:thin red solid;
}

.selection_of_speakers_no_div span {
	margin: auto;
}

<div class="selection_of_speakers_no_div">
  <span class="font_size_20">4</span>
  <span class="font_size_20">Speakers</span>
</div>

我希望speakers文字位于新行的中心，而不是在同一行。

谢谢。

Answer 1

在父元素上添加flex-direction: column css属性。

.selection_of_speakers_no_div {
  flex-direction: column;
}

默认值为row，它使Flex容器的子元素出现在一行中。

＆＃13;

.selection_of_speakers_no_div {
    padding: 35px 20px;
    margin: 0 auto;
    display: flex;
    width: 115px;
    text-align: center;
    border:thin red solid;
    flex-direction: column;
}

.selection_of_speakers_no_div span {
	margin: auto;
}

＆＃13;

<div class="selection_of_speakers_no_div">
  <span class="font_size_20">4</span>
  <span class="font_size_20">Speakers</span>
</div>

＆＃13;

Answer 2

只需使用padding代替height .selection_of_speakers_no_div和flex-direction:column;

＆＃13;

.selection_of_speakers_no_div {
    display: flex;
    padding: 55px;
    text-align: center;
    flex-direction: column;
    border:thin red solid;
}

.selection_of_speakers_no_div span {
    margin: auto;
}

＆＃13;

<div class="selection_of_speakers_no_div">
  <span class="font_size_20">4</span>
  <span class="font_size_20">Speakers</span>
</div>

＆＃13;

Answer 3

试试这个：

＆＃13;

.selection_of_speakers_no_div {
	margin: 0 auto;
	display: flex;
	min-height: 30px;
	text-align: center;
    border:thin red solid;
    flex-direction: column;
}

.selection_of_speakers_no_div span {
	margin: auto;
    outline:1px dashed blue;
}

＆＃13;

<div class="selection_of_speakers_no_div">
  <span class="font_size_20">4</span>
  <span class="font_size_20">Speakers</span>
</div>

＆＃13;

Answer 4

试试这个

.selection_of_speakers_no_div {
	margin: 0 auto;
	height: 115px;
	text-align: center;
  border:thin red solid;
}

.selection_of_speakers_no_div span {
	margin: auto;
  display:block;
}

<div class="selection_of_speakers_no_div">
      <span class="font_size_20">4</span>
                                                            <span class="font_size_20">Speakers</span>
                                                        </div>

Answer 5

试试这段代码：

<html>
<style>
.selection_of_speakers_no_div {
    margin: 0 auto;
    display: flex;
    height: 115px;
    text-align: center;
  border:thin red solid;
}

.selection_of_speakers_no_div p {
    margin: auto;
}
</style>

<body>
   <div class="selection_of_speakers_no_div">
   <p class="font_size_20">
  <span>4</span>
  <span>Speakers</span>
  </p>
</div>
</body>
</html>

Answer 6

您可以使用div的表格单元格显示样式。

.selection_of_speakers_no_div {
  margin: 0 auto;
  display: table-cell;
  width: 115px;
  height: 115px;
  text-align: center;
  border:thin red solid;
  vertical-align: middle;
}
.selection_of_speakers_no_div span {
  display: block;
}

<div class="selection_of_speakers_no_div">
   <span class="font_size_20">4</span>
   <span class="font_size_20">Speakers</span>
</div>

Answer 7

使用弹性方向属性并在2个范围之间使用margin-top和margin-bottom来选择它们之间需要的空间。

.selection_of_speakers_no_div {
    margin: 0 auto;
    flex-direction: column;
    display: flex;
    height: 115px;
    text-align: center;
    border:thin red solid;
}

.selection_of_speakers_no_div span {
    margin: auto;
}
.selection_of_speakers_no_div span:first-child {
    margin-bottom: 1px;
}
.selection_of_speakers_no_div span:not(:first-child):not(:last-child) {
    margin-bottom: 1px;
    margin-top: 1px;
}
.selection_of_speakers_no_div span:last-child {
    margin-top: 1px;
}

CSS：垂直居中多个文本

7 个答案: