Why the presence of form breaks the vertical alignment?

Question

I am trying to achieve the following layout with bootstrap

icon  |  text                       | button
icon  |  text                       | button
icon  |  text                       | button

This is the code I have at the moment, which does not work

<div class="row">
    <img src="icon.png" class="col-sm-2"/>
    <div class="col-sm-7" style="display: inline-block; vertical-align: bottom; background-color: blue;">
        <h4>Text</h4>
    </div>
    <div class="col-sm-2">
        <button type="submit" name="action" value="start" class="btn btn-primary">Button</button>
    </div>
</div>

Stripped of the irrelevant parts of course.

I tried everything from a google investigation, but no matter what I tried, the icon is much larger than the text and the button, so I end up with a situation like this

      |  text                       | button
icon  |                             |
      |                             |

But I want

      |                             | 
icon  |  text                       | button
      |                             |

I found some apparent duplicates, but none of them solved it.

Edit: I went for this solution. I cheated a bit in my initial presentation, assuming that it didn't matter, but now I am puzzled. This is the current code.

<style>
.va {
    display: inline-block;
    vertical-align: middle;
    float: none;
}   
</style>
<div class="container">
  <div class="row col-sm-offset-2 col-sm-8">
    <div class="row">
        <img src="icon.png" class="col-sm-2 va" />
        <div class="col-sm-7 va"><h4>Text</h4></div>
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
                <input type="hidden" name="whatever" value="whatever">
                <div class="col-sm-2 va">
                    <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
                </div>
        </form>
    </div>
  </div>

With the form element in, the button ends up under the text. If I remove the form element, it works as I expected. How is that possible?

http://stackoverflow.com/q/20005278/2887133 .. asnwers there and on the question marked as duplicate — DaniP, May 27 '16 at 14:29
this may help http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — , May 27 '16 at 14:35
@DaniP now I have the button under the text. Is there a difference between adding it as a class and using the style attribute? — Stefano Borini, May 27 '16 at 14:37
It's better always to avoid the inline style as much as possible ... but if you can't avoid it you need to be sure you have all the properties ... margin, vertical-align, display, float — DaniP, May 27 '16 at 14:39
@StefanoBorini both style attribute and styling using class do same job , but there is two differences, style attribute will overwrite any style has made using class ( unless you defined it by !important then inline style will not change this property ) , and it is considered as a bad practice. styling using class is better for reading and modifying, and it's considered as a good practice specially if style comes from external file (style.css). sorry for the delay. — , May 28 '16 at 23:51

score 1 · Answer 1 · answered May 27 '16 at 15:12

I think this is what you're trying to accomplish. Things to note, avoid mixing rows and columns together -> <div class="row col-sm-offset-2 col-sm-8"> and instead of mixing your columns with the content, place the content inside the columns.

Working Example;

div.box {
  display: table;
  width: 100%;
}
div.va {
  display: table-cell;
  vertical-align: middle;
  float: none;
}
.icon {
  height: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">

    <div class="box">

      <div class="col-sm-2 va" style="background: grey;">
        <img src="https://genesisui.com/img/logos/bootstrap.png" class="icon" />
      </div>

      <div class="col-sm-8 va" style="background: teal;">
        <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>

      <div class="col-sm-2 va" style="background: yellow;">
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
          <input type="hidden" name="whatever" value="whatever">
          <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

  </div>

  <div class="row">

    <div class="box">

      <div class="col-sm-2 va" style="background: grey;">
        <img src="https://genesisui.com/img/logos/bootstrap.png" class="icon" />
      </div>

      <div class="col-sm-8 va" style="background: teal;">
        <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>

      <div class="col-sm-2 va" style="background: yellow;">
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
          <input type="hidden" name="whatever" value="whatever">
          <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

  </div>

  <div class="row">

    <div class="box">

      <div class="col-sm-2 va" style="background: grey;">
        <img src="https://genesisui.com/img/logos/bootstrap.png" class="icon" />
      </div>

      <div class="col-sm-8 va" style="background: teal;">
        <h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
      </div>

      <div class="col-sm-2 va" style="background: yellow;">
        <form enctype="multipart/form-data" action="{{base_url}}" method="post" role="form">
          <input type="hidden" name="whatever" value="whatever">
          <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>

  </div>

</div>

Why the presence of form breaks the vertical alignment?

1 Answers1