CSS：多個文本垂直居中
[英]CSS : vertically centered more than one text
問題描述
我有一個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文字位於新行的中心，而不是同一行。
謝謝。
7 個解決方案
解決方案1
5 已采納 2017-01-02 10:15:22
在父元素上添加flex-direction: column css屬性。
.selection_of_speakers_no_div {
flex-direction: column;
}
默認值為
row，它使flex容器的子元素顯示在一行中。
.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; }
<div class="selection_of_speakers_no_div"> <span class="font_size_20">4</span> <span class="font_size_20">Speakers</span> </div>
解決方案2
1 2017-01-02 10:30:52
只對.selection_of_speakers_no_div和flex-direction:column;使用padding代替height
.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; }
<div class="selection_of_speakers_no_div"> <span class="font_size_20">4</span> <span class="font_size_20">Speakers</span> </div>
解決方案3
0 2017-01-02 10:19:26
嘗試這個：
.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; }
<div class="selection_of_speakers_no_div"> <span class="font_size_20">4</span> <span class="font_size_20">Speakers</span> </div>
解決方案4
0 2017-01-02 10:21:56
嘗試這個
.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>
解決方案5
0 2017-01-02 10:22:06
試試這個代碼：
<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>
解決方案6
0 2017-01-02 10:26:03
您可以為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>
解決方案7
0 2017-01-02 10:26:53
使用flex direction屬性，並在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;
}
如何均勻對齊三個文本表達式並垂直居中對齊一行
[英]How to align three text expressions evenly and centered in one line vertically
如何垂直居中多行文本（僅適用於 chrome）？
[英]How to vertically center more than one line of text (works only on chrome)?
CSS：如何對齊水平居中和垂直居中的文本內容？
[英]CSS: how to align text content horizontally-centered and vertically-centered?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.