4

I have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.

However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)

I'm using bootstrap's grid (row/col) system as well.

Something akin to...

<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
  <div class="response-part">
    <img src="foo" />
    <span class="opensans">=</span>
    <div id="rp1" class="opensans inline" style="width: 50px;">
    </div>
  </div>
</div>
<div class="col-lg-2">
  <div class="response-part">
    <img src="foo" />
    <span class="opensans">=</span>
    <div id="rp2" class="opensans inline" style="width: 50px;">
      <span class="opensans">X</span>
    </div>
  </div>
</div>
</div>
</div>

See jsfiddle

Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)

I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)

UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle

UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle

PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)

Community
  • 1
  • 1
t.j.
  • 1,227
  • 3
  • 16
  • 30
  • I am not sure if this is what you want, so I am commenting. Check this: https://jsfiddle.net/gusLnyyh/5/ – Roy Apr 07 '16 at 06:25
  • I like the idea (simplification of my css) of your suggestion, however (my fault) I didn't mention that the initial state of the html is that the response-part.div is initially empty (and is only populated when the user drags, and leaves, an element into that area, which causes problems with the placement of the "after" div you proposed. See this [this](https://jsfiddle.net/gusLnyyh/7/) jsfiddle update – t.j. Apr 07 '16 at 10:31

1 Answers1

0

Try using display: flex; on your response-part class. Something like this:

.response-part {
    display: flex;
    align-items: center;
 }

I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/

Jake
  • 135
  • 1
  • 11
  • Your solution solves the first part. I considered (and tried) using flexbox without any success. You (thankfully) corrected what I thought was a requirement that the parent element be marked as flex as well, and that "align-center" just affected the horizontal spacing (not the vertical alignment as you demonstrated.) **Any thoughts on the spacing of the span element from the "underline" element? See [this](https://jsfiddle.net/gusLnyyh/7/) fiddle for an idea of what I'm referring to.** – t.j. Apr 07 '16 at 10:55