-1

I am having a heck of a time getting some icons to all appear aligned how I want.

Here is image of situation:

enter image description here

Here is a jfiddle that I set up to try and capture the necessary details:

https://jsfiddle.net/qtzu4ecL/1/

.topicrow-header .ld-topic-info {
    margin-left: 10px;
}

.ld-topic-info .fas, .ld-topic-info .far {
    padding-left: 10px;
    padding-right: 10px;
}

.topicrow-header.stick {
    position: sticky;
    position: -webkit-sticky;
    top: 110px;
    font-size: 26px;
    background-color: #ff9535;
    color: white;
    font-weight: 300;
}
.topicrow-header {
    z-index: 50;
    background-color: #d3d3d380;
    margin-top: 6px;
    padding: 5px;
    margin-left: 0;
    font-size: 20px;
    color: #007bff;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.ldnt-content-notes {
    text-align: center;
    display:inline;
}

.ldnt-content-notes .nt-note-tab {
    margin: 0;
    display: inline;
    color: #fff;
}

.nt-note-tab {
    display: inline;
    text-align: center;
    font-weight: bold;
    bottom: 0;
    text-decoration: none;
    border-bottom: 0 !important;
    font-size: 14px;
    box-shadow: none !important;
    transition: all ease-in-out 250ms;
    background: rgba(0,0,0,0.95);
    z-index: 9000;
}
<div class="row topicrow-header stick" >
  <div class="topic-title">Here is some topic title</div>
  <div class="ld-topic-info">
    <i class="topic-mark-complete far fa-check-circle ld-topic-complete" ></i>
    <i class="topic-mark-favorite far fa-heart fav" ></i>
    <i class="topic-mark-watched far fa-eye watch" ></i>
   <div class="ldnt-content-notes">
      <a class="nt-note-tab  shortcode" href="#" >
        <i class="fas fa-edit" ></i>
      </a>
   </div>
 </div>
</div>

I have tried so many different things but just can't get it right. The first 3 icons are without divs, they are just displayed inline as <i> elements. The 4th icon has a div and a element as they used by a WordPress plugin. Those elements are somehow causing the problem but I can't figure out how.

I want to have the 4th icon displayed as same size as preceding 3 icons and without that black background as well, but for now just trying to solve the alignment problem so that these 4 icons are aligned with one another with no vertical offsets.

halfer
  • 19,824
  • 17
  • 99
  • 186
Brian
  • 561
  • 5
  • 16

3 Answers3

3

Plz try this code..

css

.topicrow-header .ld-topic-info,
.ldnt-content-notes {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
Manikandan2811
  • 831
  • 4
  • 9
  • That did it! Thanks. Seems odd that display flex is what is needed here. I thought for sure it was a vertical-align or margin/padding deal... – Brian Nov 01 '19 at 09:54
  • The purpose of display flex is to assign the same height for first child div.. In that we can add align-top, align-center, align-end etc... – Manikandan2811 Nov 01 '19 at 12:49
  • If u have any doubt like prev ques, u can ask freely -:) – Manikandan2811 Nov 01 '19 at 12:53
0

Just change the font size inside:

.nt-note-tab {
    font-size: 26px;
}

Than all the icons will be same size. Also on Fiddle

skobaljic
  • 9,379
  • 1
  • 25
  • 51
  • Tried that but the icon was still vertically offset a bit from others. Maybe because my site has a bunch of other CSS that is influencing things whereas in the jfiddle this works. Manikandan2811's answer seemed to do the trick. Thanks for trying to help! – Brian Nov 01 '19 at 09:56
0

Just add these lines of code:

.ld-topic-info {
    display: flex;
    align-items: center;
}

.ldnt-content-notes {
    text-align: center;
    display:flex;
}

You can check it on action here

ptheodosiou
  • 390
  • 3
  • 17