CODEWITHSUNDEEP
htmlcss
user7030651
user7030651

Reputation:

CSS : Icon and text side by side and having space between two text

I am making a div having an icon and a two span to right side.

just like in the image

image

.widgets_div {
  border-bottom: thin #edf1f2 solid;
  padding: 22.85px 0;
}

.widgets_div .icon_div {
  display: inline;
  margin-left: 15px;
}

.widgets_div .icon_div span i {
  font-size: 24px;
}

.widgets_div .text_div {
  display: inline;
  margin-left: 10px;
}

.widgets_div .text_div span {
  color: #58666e;
  font-size: 12px;
}

.widgets_div .text_div span+span {
  color: #747F85;
  font-size: 11px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="widgets_div">
  <div class="icon_div">
    <span><i class="fa fa-calendar"></i></span>
  </div>
  <div class="text_div">
    <span>Upcoming Events</span><br>
    <span>Description</span>
  </div>
</div>

I have tried this code but i could not get my expected result.

Upvotes: 0

Views: 22787

Answers (3)

Pine Code
Pine Code

Reputation: 2767

Try this:

.widgets_div {
   border-bottom: thin red solid;
   padding: 22.85px 0;
   display: flex;
   align-items: center;
}

Upvotes: 4

gelanivishal
gelanivishal

Reputation: 318

Please check this jsFiddle

Please replace this code in your css

.widgets_div .text_div {
    display: inline-block;
    margin-left: 10px;
}
.widgets_div .icon_div {
    display: inline-block;
    margin-left: 15px;
}

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Use display: inline-block; instead

.widgets_div {
  border-bottom: thin #edf1f2 solid;
  padding: 22.85px 0;
}

.widgets_div .icon_div {
  display: inline-block;
  margin-left: 15px;
  vertical-align:middle;
}

.widgets_div .icon_div span i {
  font-size: 24px;
}

.widgets_div .text_div {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.widgets_div .text_div span {
  color: #58666e;
  font-size: 12px;
}

.widgets_div .text_div span+span {
  color: #747F85;
  font-size: 11px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="widgets_div">
  <div class="icon_div">
    <span><i class="fa fa-calendar"></i></span>
  </div>
  <div class="text_div">
    <span>Upcoming Events</span><br>
    <span>Description</span>
  </div>
</div>

Upvotes: 1

Related Questions