1

I am trying to position elements, an img and div, side by side which then stack on top of each other when the browser width becomes smaller to make it responsive.

I have managed to do this to a degree however I am unable to get the 2 elements to be the same widths when they are stacked on top of each other.

Also I am having trouble vertically aligning the text in the div to be in the middle instead of the top.

This is what I am trying to achieve.

enter image description here

JSfiddle https://jsfiddle.net/31c5vLn6/

Code:

.upperSection{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
.upperBox{
    background-color:white;
    text-align: center;
    verticle-align:middle;
}
.description{
    background-color: white;
}


<div class="upperSection">
        <img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364">
        <div class="upperBox">
            <div class="description">
                <span class="header"><br>Header</span>
                <br><br>
                <span class="text">Text Goes here</span>
            </div>
        </div>
    </div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Mr Robot
  • 13
  • 2

2 Answers2

1

.upperSection {
  display: flex;
  justify-content: center;
}
.upperBox {
  display: flex;                     /* 1 */
  text-align: center;
  background-color: white;
  
}
.description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;                            /* 2 */
  background-color: white;
}
@media (max-width: 500px) {
  .upperSection { flex-wrap: wrap; }
  .upperBox { width: 100%; }          /* 3 */
}
<div class="upperSection">
  <img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364">
  <div class="upperBox">
    <div class="description">
      <span class="header">Header</span>
      <span class="text">Text Goes here</span>
    </div>
  </div>
</div>

jsFiddle

Notes:

  1. By making this element a flex container, you're applying align-items: stretch to the child. This gives .description the height of the container, and justify-content then has space to work.
  2. Similar to #1, this gives the element full width, giving text-align: center space to work.
  3. Since the parent is a row-direction flex container, flex: 1 would work here, as well.
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Is it safe to use `flex-direction: column;` nowadays? – Ricky Ruiz Oct 03 '16 at 16:08
  • 2
    @RicardoRuiz, I've haven't seen any problems with `flex-direction: column` with default settings. A container with `column wrap`, however, that's another story. You'll find lots of bugs there. – Michael Benjamin Oct 03 '16 at 16:11
  • 1
    @Michael_B Thank you very much for your help – Mr Robot Oct 03 '16 at 16:16
  • 1
    @Michael_B Damn really? not so long ago I changed all the `flex-direction` values in a project thinking it was not safe `:(`, but I think I used wrap as well so... Thanks for the clarification! – Ricky Ruiz Oct 03 '16 at 16:17
  • 2
    @RicardoRuiz, a few reasons why I don't think `column wrap` is ready for prime time. See [**here**](http://stackoverflow.com/q/33891709/3597276), [**here**](http://stackoverflow.com/q/39095473/3597276), [**here**](http://stackoverflow.com/q/39617628/3597276) and [**here**](http://stackoverflow.com/q/34480760/3597276). – Michael Benjamin Oct 03 '16 at 16:29
  • 1
    @Michael_B Excellent answers and resources, thanks again Michael, you're greatly contributing to get away from the floats era in this kind of layout. – Ricky Ruiz Oct 03 '16 at 16:52
-2

Don't you think the vertical-align: ** should be **center.

booluw
  • 324
  • 5
  • 15
  • **center** is not a valid value for [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align). – hungerstar Oct 03 '16 at 16:13