CSS HTML5 DIV Align Everything in Middle

Question

For the life of me I can not figure out how to align the Month in Middle of the Arrows. The i class is font awesome. I have tried margin:auto, padding-top/padding bottom, line height etc. This should be easy. But it always ends up on the bottom.

div needs the style code...

 <div>
 <i class="fa fa-caret-left" style="font-size:35px"></i>
  NOVEMBER 2020 
 <i class="fa fa-caret-Right" style="font-size:35px"></i>
 </div>

text-align:center should do it – Temani Afif Nov 01 '20 at 19:26 — Temani Afif, Nov 01 '20 at 19:26

score 0 · Accepted Answer · answered Nov 01 '20 at 17:49

0

use flexbox CSS.

div{
  border:1px solid black; 
  display:flex;
  justify-content: space-between;
  align-items:center;
}

<div>
 <i class="fa fa-caret-left" style="font-size:35px">-</i>
  NOVEMBER 2020 
 <i class="fa fa-caret-Right" style="font-size:35px">+</i>
 </div>

answered Nov 01 '20 at 17:49

Dhruvi Makvana

895
5
17

Works for text thx - but I need 250px width centered on page. Align center doesn't work – Merle_the_Pearl Nov 01 '20 at 17:59
can you please add an image of expected behaviour? – Dhruvi Makvana Nov 01 '20 at 18:02
margin auto works – Merle_the_Pearl Nov 01 '20 at 18:08

score 0 · Answer 2 · answered Nov 01 '20 at 17:53

0

According to your question you just want the text in the middle? If so, just create a class within your div and use the below CSS.

HTML

  <div class = "sample">
 <i class="fa fa-caret-left" style="font-size:35px"></i>
  NOVEMBER 2020 
 <i class=" fa fa-caret-Right" style="font-size:35px"></i>
 </div>

CSS

  .sample {
   margin: auto;
  width: 50%;
  padding: 10px;
  text-align: center;
  
}

answered Nov 01 '20 at 17:53

Mamdlv

540
8
23

Month not aligned middle – Merle_the_Pearl Nov 01 '20 at 18:03

CSS HTML5 DIV Align Everything in Middle

2 Answers2