Vertical alignment when using Overflow Hidden

Question

I am having no luck trying to align some text. I tested with the Overflow Hidden value removed but still couldn't get it looking how I would like.

Here is a codepen page example: http://codepen.io/anon/pen/oXrPGJ

HTML

<div>
 <article>
  <section>
   <h2 class="colourtitle">
    <img class="sideimage" src="http://placehold.it/256x256">
    I'm glad I wrap, wish I was vert mid
   </h2>
  </section>
 <article>
</div>

And the CSS

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

h2 {
    padding-top: 1.5em !important;
    overflow: hidden !important;
}

.colourtitle {
    border-bottom-style: solid;
    border-bottom-color: red;
    border-bottom-width: 10px;
    padding: 5px 0 0 0;
}

.sideimage {
    display: inline-block;
    margin-right: 0.5em;
    max-width: 70px; 
    padding-top: 10px;
    border-right-style: solid;
    border-right-color: red;
    border-right-width: 10px;
    float: left;
}

I have Top Padding on my header tag, because on my actual page there will be many of these stacked, so just creates a nice white space.

I have set the Overflow Hidden, so that when viewed on a mobile screen the text wraps as I wish, and does not sit beneath the image.

h2 {
padding-top: 1.5em !important;
overflow: hidden !important;
}

You can see I'm using a thumb image, which has a right side border to it. Along with an H2 tag, and that's all using a bottom side border.

But, I would like the text to be a little bit lower, so that it positions in the middle vertically, but still does the wrapping when needed on small screens.

I hope that is clear, and that someone can help me out with a snipped of code required. Thanks

Questions seeking debugging help ("why isn't this code working?") must include the shortest code necessary to reproduce it in the question itself. Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D
– Paulie_D, Commented Aug 21, 2015 at 15:04
Sorry Paulie_D, I didn't realise this. I see that Magnus has also kindly edited my code to include this, so I have just approved that for future if the codepen vanishes. Thanks again, Magnus — user2960372
– user2960372, Commented Aug 21, 2015 at 15:22

Magnus · Accepted Answer · 2015-08-21 15:10:20Z

5

Depending on your browser support requirements, you could look into flexbox.

Looking at the provided link and code, you could get the text to position in the middle vertically by using display: flex and align-items: center.

.colourtitle {
  border-bottom-style: solid;
  border-bottom-color: red;
  border-bottom-width: 10px;
  padding: 5px 0 0 0;

  display: flex;
  align-items:center;
}

answered Aug 21, 2015 at 15:10

Magnus

1702 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2960372 Over a year ago

Thanks Magnus. This worked for me, just added those two lines of flexbox css and tested on my full page and worked a treat.

Collectives™ on Stack Overflow

Vertical alignment when using Overflow Hidden

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related