Centered vertical text.Well | Row | Columns

1

Hello!

I’m trying to vertically center some text and am struggling hard.

I’ve tried a few variations of CSS and HTML directly and each seem to just make it worse.

The text I’m trying to get vertically centered is “I’m a first time Arizona gardener. I wanted to showcase what I’m growing, and how it progresses over time.”

It’s in the first well, next to my mug shot. When the screen is maximized it hugs the top and I dislike it…
If you have an example with HTML or CSS that corrects this I’d love a link to it =).

2

Hi

This video might help; I haven’t tried it myself yet tho…

1 Like
3

The only way to do that reliably is with FlexBox.

This guy was pretty chuffed when vertical align was “solved” with flexbox.

Bootstrap 4 has a flexbox option… not sure what you get with the cdn link though (as you are using with codepen)

Your other options are padding or absolute positioning etc but they can give rubbish results when the screen size changes (and thus the container size if set to a relative height).

To use the vertical-align property, you must apply it to an inline element (such as a img) or use table and cell layout. otherwise it will do nothing.

1 Like
4

Thank you both!
Either way it’s going to be a pain. blah.

5

Honestly, yeh it can be a pain… until you swallow that flexbox pill and then it’s just not an issue. You can use flexbox in conjunction with bootstrap 3 (in lieu of col-sx-4 and all that business), and as I said, BS4 can include it too if you download the flex version rather than grid (once your not working in codepen anymore). otherwise… it’s tables i’m afraid.

6

first of all, you put two cols with size 7 in a same row… bootstrap supports only 12 columns per row. so, that will break your layout, you need fix it:

<div class="row">
 <div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>

ok, now you can do the trick, in the parent div, the container of text, you can set a fixed height, to hold your text at vertical position, now, at this parent div, set position: relative;
and in your text set:position: absolute; top: 50%; transform: translateY(-50%);

7

oh, so there is a solution.

Does this work on divs/content with a variable height?

8

I’ve gotten it working, it required js though. (I’d rather not use any JS if I can avoid it, since it’s not something I really understand or am focused on learning currently)

I’ve tried this solution from @leandroruel and I must be doing it wrong, can’t get it to function.

9

PS:
How I ended up resolving this was from: link
css:

 .vcenter {
        display: inline-block;
        vertical-align: middle;
        float: none;

html:
     <div class="well" id="intro">
        <div class="row">
          <div class="col-md-7 vcenter">
            <p id="introtext">...</p>
            <p id="name">...</p>
          </div><!-- 
    -->
          <div class="col-md-5 vcenter">
            <img class="img-responsive img-circle" src="..."
              alt="...">
          </div>
        </div>
      </div>

js:
$('.row').html($('.vcenter'));

A part that was hard was realizing the <!-- --> is actually required to get this to work…

10

Glad you got it working,

I think I’d have persevered with either @leandroruel’s solution or the flexbox way until it was working as it seems the stack overflow version (even with all those upvotes) is a bit of a hack (browser support beware) and not necessary these days.

11

I’m still trying to get @leandroruel 's to work.

I want to understand how something works than do the way I have it set up now.
I’m trying to not use any JS since it’s not something I’ve really jumped into.

I’ll shout if I get it working =)

1 Like
12

Also the <!-- -->

is supposed to be <!-- ... -->

You may not need the jQuery statement then??

not sure tho.

13

Am I misunderstanding where the parent div and text set’s are in your description?

css:

#parentdiv {
  position: relative;
}

#textset {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

It’s not showing the actual html code in my reply for some reason, sorry.

14

check it: https://codepen.io/leandroruel/pen/GNmdQm

15

It seems to be having the same issues.
It’s moving items out of the well/container.

16

I’ve found this to work pretty well. It’s been tested in Chrome, FF, and IE 10+ (Doesn’t work correctly for versions prior to IE10+, but that is a very small market share). If you want to add space between the image and text, you can add a margin to either of them and adjust it using media queries for different sized screens.

.flex-center-v{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

<div class="flex-center-v">
    <p>
       <span>This is vertically centered text.</span>
       <img src="http://placehold.it/250x250" class="img-circle" />
    </p>
</div>
1 Like
17

Thanks!
I’ll fiddle with this when I get home today.

18

but he’s using a older version of bootstrap, this version don’t support flexbox.

19

The code I used will still work with the version of bootstrap he’s using in the codepen. In the testing environment that I used, I was using the same version of bootstrap. Flex is a css property and can be used with or without bootstrap. It depends on how you implement it. If you’re trying to center two separate bootstrap columns, then you may have to opt for something different. But if you’re trying to vertically center something that’s contained within the same bootstrap column, which is what I posted in my code above, then you should be able to use the display: flex option regardless of whether you’re using bootstrap or not because it doesn’t directly interact with the bootstrap framework. I did do some testing with the flex display option to work with bootstrap columns and got it to work, but it took some trial and error to get the look and feel that I was after.