CSS : vertically centered more than one text
Question
I have a div which have the text in the center of it. when I write second text then instead of having next line in the center it displays on the same line.
.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>
I want speakers text to be center and in the new line rather than on the same line.
Thank You.
7 answers
solution1
5 ACCPTED 2017-01-02 10:15:22
Add flex-direction: column css property on parent element.
.selection_of_speakers_no_div {
flex-direction: column;
}
Default value is
rowwhich makes child elements of flex container to appear in one row.
.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>
solution2
1 2017-01-02 10:30:52
Just use padding in place of height for .selection_of_speakers_no_div and flex-direction:column;
.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>
solution3
0 2017-01-02 10:19:26
try this:
.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>
solution4
0 2017-01-02 10:21:56
Try this
.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>
solution5
0 2017-01-02 10:22:06
Try this code :
<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>
solution6
0 2017-01-02 10:26:03
You can use a table-cell display style for 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>
solution7
0 2017-01-02 10:26:53
Use flex direction property and use margin-top and margin-bottom between 2 span to select how much space you want between them.
.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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.