CODEWITHSUNDEEP
htmlcss
user7030651
user7030651

Reputation:

CSS : vertically centered more than one text

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.

Upvotes: 2

Views: 50

Answers (7)

aavrug
aavrug

Reputation: 1889

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>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

Add flex-direction: column css property on parent element.

.selection_of_speakers_no_div {
  flex-direction: column;
}

Default value is row which 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>

Upvotes: 5

reza
reza

Reputation: 1507

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;
}

Upvotes: 0

Banzay
Banzay

Reputation: 9470

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>

Upvotes: 0

sansan
sansan

Reputation: 833

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>

Upvotes: 0

Lubos Voska
Lubos Voska

Reputation: 177

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>

Upvotes: 0

Abood
Abood

Reputation: 570

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>

Upvotes: 0

Related Questions