CODEWITHSUNDEEP
htmlcss
Shank
Shank

Reputation: 1398

Trying to vertically align icons and divs

I'm using materializecss, and I need help to align the contents vertically center only. I'm not good with CSS.

https://jsfiddle.net/Shank09/z0pu0znm/

I've played around with line-height, font-size, and margin.

Here is the image:

enter image description here

HTML code:

   <div class="col s12 m6">
      <div class="card">
         <div class="card-content">
            <span class="card-title">
              <i class="material-icons">business_center</i>
                My List
              <span id="listcount">
                (12)
              </span>
              <i class="material-icons right">search</i>
              <span class="new badge yellow" data-badge-caption="">
                1
              </span>
              <span class="new badge red" data-badge-caption="">
                12
              </span>
              <span class="new badge green" data-badge-caption="">
                1
              </span>
            </span>

I'm aiming for:

enter image description here

Upvotes: 0

Views: 57

Answers (2)

Nathan Arthur
Nathan Arthur

Reputation: 9106

Seems like this is what you want.

Added CSS:

.card .card-content .card-title, .badges, .title {
  display: flex;
  align-items: center;
}

.card .card-content .card-title {
  justify-content: space-between;
}

.title > * {
  padding: 5px;
}

Also added a .badges span around your badges + search icon, and a .title span around your title text.

Upvotes: 0

Mitchel Jager
Mitchel Jager

Reputation: 445

How about this? https://jsfiddle.net/z0pu0znm/1/

I added an additional parent element around the icons to contain them. They have a margin-left: auto; which by itself wouldn't do anything. That's where parent elements comes in.

.card .card-content .card-title {
  display: flex;
  align-items: center;
}

This uses Flexbox. Flexbox is a great way of quickly aligning a bunch of stuff. In this case align-items centers then vertically. I recommend looking in to Flexbox, as it will save you tons of headaches in the long run!

Upvotes: 3

Related Questions